Code
The SVG Editor shows your drawing and its code side by side. Whatever you change in the code appears in the preview right away - and whatever you move, resize or recolor on the canvas shows up in the code. That makes it quick to adjust icons, logos, charts and illustrations without opening a large graphics program.
Everything runs in your browser. Files are not uploaded, there is no sign-up and no advertising.
Tags, attributes and values in their own colors, line numbers, indenting with Tab, automatic closing of tags and a clear error message with the line number.
Click, drag, resize with the handles, rotate, flip, duplicate, bring forward or send backward - rectangles, circles, paths, polygons, text and groups.
Fill and outline with a color picker or as a value, opacity, outline width, dashed lines, round or square line ends.
Any grid spacing, in the drawing's own coordinates. Shapes snap exactly onto the lines - or untick "Snap" to move them freely.
Rectangle, ellipse, circle, line, freehand and text - with your choice of colors for new shapes.
SVG (as written, tidied up or shrunk), PNG with a transparent background, JPG, WebP, data URI, Base64, CSS and React component.
Any https page (and localhost) can embed the editor with an <iframe> and ?embed=1 - no sign-up, no key. Embedded, the editor hides this text and shows a Save button. There are two ways to get the drawing in and out.
src= opens a file (your server must allow CORS), webhook= makes "Save" (Ctrl+S) send the drawing to that address. Add &token=… for an Authorization: Bearer … header and &auto to save after every change.
<iframe src="https://svg.giit.ch/?embed=1&src=https://your-site.com/docs/logo.svg&webhook=https://your-site.com/save.php"
allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>The webhook gets a POST with JSON { editor, event: "save", id, name, content, updated }. A small PHP script that stores it:
<?php
header('Access-Control-Allow-Origin: https://svg.giit.ch');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Methods: POST, OPTIONS');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') exit;
if (($_SERVER['HTTP_AUTHORIZATION'] ?? '') !== 'Bearer SECRET') { http_response_code(403); exit; }
$d = json_decode(file_get_contents('php://input'), true);
$name = preg_replace('/[^\w\- ]/u', '_', $d['name']);
file_put_contents(__DIR__ . "/docs/$name.svg", $d['content']);
echo '{"ok":true}';The editor says svgeditor:ready, your page answers with svgeditor:load, the editor reports svgeditor:loaded, svgeditor:change on real edits and svgeditor:save when the user saves. Your page may send svgeditor:get (the current state) or svgeditor:save (press Save). Saving then goes through your own login and session.
<iframe id="ed" src="https://svg.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://svg.giit.ch';
addEventListener('message', async e => {
if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
const m = e.data;
if (m.type === 'svgeditor:ready') { // the editor is ready: hand it the drawing
ed.contentWindow.postMessage({
type: 'svgeditor:load',
name: 'Logo',
content: await (await fetch('/docs/logo.svg')).text(),
}, ORIGIN);
}
if (m.type === 'svgeditor:change') document.title = '● not saved'; // a real edit
if (m.type === 'svgeditor:save') { // the user clicked "Save"
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// A save button on your own page: the answer comes as svgeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'svgeditor:get' }, ORIGIN); }
</script>AI Assistant inside your page: it works in the frame too. With allow="clipboard-write" on the iframe, "Copy prompt" uses the clipboard directly (otherwise the editor falls back to the old copy command, or shows the prompt to copy by hand). A link the AI sends cannot reach an editor inside another website, so the editor tells the AI and the user to paste the AI's whole answer into the editor instead - or open the editor in a window of its own.
window.open("https://svg.giit.ch/?embed=window", "svgeditor-17") opens the full editor in its own window and speaks the same messages with window.opener. Links from an AI reach it there. svgeditor:load may also carry context: { host, title, rules } - the AI prompt then says where the drawing belongs and follows your rules - and hook: { url, token }, a webhook for this drawing only that is never stored. Closing the window with unsaved changes sends svgeditor:closing.
Hand the editor your own prompt, an address on your site and a key for this editor session. The AI dialog then shows "Connected to" your site, what you tell the AI, and the choice change the current drawing or make a new one; Copy prompt puts it all together. The AI posts its result with the key to your server, and your page opens it in the editor - a new drawing opens separately and stays in the user's browser. One key per editor session: it stays valid while the editor is open, and only while it has none the editor asks for it with svgeditor:key-request. The editor never sends the key itself and never stores it; the address must be https on your own host or a subdomain of it.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // one key per editor session
const k = await key();
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content, ai: {
label: 'My Site', prompt: 'Keep the [[placeholders]]. Write in German.',
endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// remember the id from svgeditor:loaded and ignore change/save/closing with another id
// only while the editor has no key:
if (m.type === 'svgeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'svgeditor:ai', key: k.key }, ORIGIN); }
// while the editor is open, tell your server every minute; closing the editor or the page voids the key
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// your server has a result (polling, SSE …): target is "current" or "new"
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - the key of this editor session of the logged-in user (your page calls it)
session_start(); // check that the user may edit this drawing
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // or in your database; ?alive= sets seen again
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - the AI posts here (no CORS headers: AIs call it from a server)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // your database: not voided, seen in the last 3 minutes
if (!$row) { http_response_code(401); exit('{"ok":false,"error":"key not valid"}'); }
$d = json_decode(file_get_contents('php://input', false, null, 0, 2000000), true);
save_draft($row['doc'], $d['content'], $d['target'] === 'new' ? 'new' : 'current'); // your page shows it with svgeditor:load
echo '{"ok":true}';Make keys with at least 128 random bits, store only their hash, bind each to the logged-in user, the drawing and this editor session, make one per session, keep it valid only while your page reports the session as open, and void it when the editor or the page closes.
The whole protocol is in llms.txt - give it to an AI and it builds the connection for your system. The LaTeX Editor works the same way with the prefix latexeditor: - latex.giit.ch.
No. The editor runs entirely in your browser. Files you open and your code are never sent to a server; a draft is only kept in your browser's local storage.
Only in your browser. The editor keeps any number of drawings there - click the folder button at the top left (My drawings) to open, rename, duplicate, download or delete them. Nothing is uploaded; clearing your browser's site data removes them, so download the ones you want to keep.
Open or paste your SVG, click "Export", choose PNG, pick a size (1×, 2×, 4× or your own) and click "Download". The background stays transparent unless you choose a color.
Yes. Click a shape to select it. You can drag it, resize it with the small squares, rotate, flip and recolor it. The code on the left changes along with it.
The grid shows guide lines in the drawing's own coordinates. When it is on, shapes you move or draw snap exactly onto the grid lines. Untick "Snap" to keep the grid visible but move shapes freely.
Yes. Choose "React component (JSX)" in the export. Attributes such as stroke-width become strokeWidth, class becomes className, and the component accepts further props.
Yes, any AI - ChatGPT, Claude, Gemini, Copilot or the AI in your coding tool. Click "AI Assistant", then "Copy prompt", paste it into your AI and say what it should draw. The AI answers with a link; click it and the drawing appears in your editor. It can change the open drawing or make new ones next to your others. Nothing to install, and "Undo" takes every change back.
Yes. Embed it with an iframe and exchange drawings with postMessage, or let it send every saved version to your server with a webhook. See Use the editor on your own website for examples.
No. The editor is free, without ads and without sign-up.