Code
Der SVG-Editor zeigt deine Zeichnung und ihren Code nebeneinander. Was du im Code änderst, erscheint sofort in der Vorschau - und was du auf der Zeichenfläche verschiebst, skalierst oder umfärbst, steht gleich im Code. So passt du Icons, Logos, Diagramme und Illustrationen schnell an, ohne ein grosses Grafikprogramm zu öffnen.
Alles läuft in deinem Browser. Dateien werden nicht hochgeladen, es gibt keine Anmeldung und keine Werbung.
Tags, Attribute und Werte in eigenen Farben, Zeilennummern, Einrücken mit Tab, automatisches Schliessen von Tags und eine klare Fehlermeldung mit der Zeilennummer.
Anklicken, ziehen, mit den Griffen skalieren, drehen, spiegeln, duplizieren, nach vorn oder nach hinten stellen - Rechtecke, Kreise, Pfade, Polygone, Text und Gruppen.
Füllung und Kontur mit Farbwähler oder als Wert, Deckkraft, Konturbreite, gestrichelte Linien, runde oder eckige Linienenden.
Beliebiger Rasterabstand, in den eigenen Koordinaten der Zeichnung. Formen rasten genau auf den Linien ein - oder entferne das Häkchen bei «Einrasten», um sie frei zu bewegen.
Rechteck, Ellipse, Kreis, Linie, Freihand und Text - mit Farben deiner Wahl für neue Formen.
SVG (wie geschrieben, aufgeräumt oder verkleinert), PNG mit transparentem Hintergrund, JPG, WebP, data-URI, Base64, CSS und React-Komponente.
Jede https-Seite (und localhost) kann den Editor mit einem <iframe> und ?embed=1 einbetten - ohne Anmeldung, ohne Schlüssel. Eingebettet blendet der Editor diesen Text aus und zeigt einen Speichern-Knopf. Die Zeichnung kommt auf zwei Arten hinein und wieder heraus.
src= öffnet eine Datei (dein Server muss CORS erlauben), webhook= lässt «Speichern» (Ctrl+S) die Zeichnung an diese Adresse senden. Füge &token=… für einen Authorization: Bearer …-Header hinzu und &auto, um nach jeder Änderung zu speichern.
<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>Der Webhook erhält einen POST mit JSON { editor, event: "save", id, name, content, updated }. Ein kleines PHP-Skript, das ihn speichert:
<?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}';Der Editor meldet svgeditor:ready, deine Seite antwortet mit svgeditor:load, der Editor meldet svgeditor:loaded, svgeditor:change bei echten Änderungen und svgeditor:save, wenn gespeichert wird. Deine Seite kann svgeditor:get (den aktuellen Stand) oder svgeditor:save (Speichern drücken) senden. Gespeichert wird dann über dein eigenes Login und deine eigene Sitzung.
<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') { // der Editor ist bereit: ihm die Zeichnung geben
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'; // eine echte Änderung
if (m.type === 'svgeditor:save') { // es wurde auf "Speichern" geklickt
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Ein Speichern-Knopf auf deiner eigenen Seite: die Antwort kommt als svgeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'svgeditor:get' }, ORIGIN); }
</script>KI-Assistent in deiner Seite: Er funktioniert auch im Frame. Mit allow="clipboard-write" am iframe nutzt «Prompt kopieren» direkt die Zwischenablage (sonst greift der Editor auf den alten Kopierbefehl zurück oder zeigt den Prompt zum Kopieren von Hand). Ein Link der KI erreicht keinen Editor in einer anderen Website, darum sagt der Editor der KI und dir, die ganze Antwort der KI stattdessen in den Editor einzufügen - oder den Editor in einem eigenen Fenster zu öffnen.
window.open("https://svg.giit.ch/?embed=window", "svgeditor-17") öffnet den vollen Editor in einem eigenen Fenster, das dieselben Meldungen mit window.opener austauscht. Links einer KI erreichen ihn dort. svgeditor:load kann auch context: { host, title, rules } mitgeben - der KI-Prompt sagt dann, wohin die Zeichnung gehört, und befolgt deine Regeln - sowie hook: { url, token }, einen Webhook nur für diese Zeichnung, der nie gespeichert wird. Wird das Fenster mit ungespeicherten Änderungen geschlossen, kommt svgeditor:closing.
Gib dem Editor deinen eigenen Prompt, eine Adresse auf deiner Website und einen Schlüssel für diese Editor-Sitzung. Der KI-Dialog zeigt dann «Verbunden mit» deiner Website, was du der KI sagst, und die Wahl die aktuelle Zeichnung ändern oder eine neue erstellen; Prompt kopieren setzt alles zusammen. Die KI sendet ihr Ergebnis mit dem Schlüssel an deinen Server, und deine Seite öffnet es im Editor - eine neue Zeichnung öffnet sich separat und bleibt im Browser der Person, die zeichnet. Ein Schlüssel pro Editor-Sitzung: Er bleibt gültig, solange der Editor offen ist, und nur solange er keinen hat, fragt der Editor mit svgeditor:key-request danach. Der Editor sendet den Schlüssel selbst nie und speichert ihn nie; die Adresse muss https auf deinem eigenen Host oder einer Subdomain davon sein.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // ein Schlüssel pro Editor-Sitzung
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);
// die id aus svgeditor:loaded merken und change/save/closing mit anderer id ignorieren
// nur solange der Editor keinen Schlüssel hat:
if (m.type === 'svgeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'svgeditor:ai', key: k.key }, ORIGIN); }
// solange der Editor offen ist, jede Minute deinem Server melden; Schliessen des Editors oder der Seite macht den Schlüssel ungültig
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// dein Server hat ein Ergebnis (Polling, SSE …): target ist "current" oder "new"
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - der Schlüssel dieser Editor-Sitzung der angemeldeten Person (deine Seite ruft es auf)
session_start(); // prüfen, ob die Person diese Zeichnung bearbeiten darf
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // oder in deiner Datenbank; ?alive= setzt seen neu
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - die KI sendet hierher (keine CORS-Header: KIs rufen es von einem Server auf)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // deine Datenbank: nicht ungültig, in den letzten 3 Minuten gesehen
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'); // deine Seite zeigt es mit svgeditor:load
echo '{"ok":true}';Erzeuge Schlüssel mit mindestens 128 Zufallsbits, speichere nur ihren Hash, binde jeden an die angemeldete Person, die Zeichnung und diese Editor-Sitzung, erzeuge einen pro Sitzung, lass ihn nur gültig, solange deine Seite die Sitzung als offen meldet, und mach ihn ungültig, wenn der Editor oder die Seite schliesst.
Das ganze Protokoll steht in llms.txt - gib es einer KI, und sie baut die Anbindung für dein System. Der LaTeX-Editor funktioniert gleich, mit dem Präfix latexeditor: - latex.giit.ch.
Nein. Der Editor läuft ganz in deinem Browser. Geöffnete Dateien und dein Code werden nie an einen Server gesendet; ein Entwurf wird nur im lokalen Speicher deines Browsers aufbewahrt.
Nur in deinem Browser. Der Editor behält dort beliebig viele Zeichnungen - klicke oben links auf den Ordner-Knopf (Meine Zeichnungen), um sie zu öffnen, umzubenennen, zu duplizieren, herunterzuladen oder zu löschen. Nichts wird hochgeladen; löschst du die Website-Daten deines Browsers, sind sie weg - lade also herunter, was du behalten willst.
Öffne dein SVG oder füge es ein, klicke auf «Exportieren», wähle PNG, eine Grösse (1×, 2×, 4× oder eine eigene) und klicke auf «Herunterladen». Der Hintergrund bleibt transparent, ausser du wählst eine Farbe.
Ja. Klicke eine Form an, um sie auszuwählen. Du kannst sie ziehen, mit den kleinen Quadraten skalieren, drehen, spiegeln und umfärben. Der Code links ändert sich mit.
Das Raster zeigt Hilfslinien in den eigenen Koordinaten der Zeichnung. Ist es eingeschaltet, rasten Formen, die du verschiebst oder zeichnest, genau auf den Rasterlinien ein. Entferne das Häkchen bei «Einrasten», um das Raster sichtbar zu lassen, die Formen aber frei zu bewegen.
Ja. Wähle im Export «React-Komponente (JSX)». Attribute wie stroke-width werden zu strokeWidth, class wird zu className, und die Komponente nimmt weitere Props an.
Ja, jede KI - ChatGPT, Claude, Gemini, Copilot oder die KI in deinem Programmier-Tool. Klicke auf «KI-Assistent», dann auf «Prompt kopieren», füge ihn in deine KI ein und sag, was sie zeichnen soll. Die KI antwortet mit einem Link; klickst du ihn an, erscheint die Zeichnung in deinem Editor. Sie kann die offene Zeichnung ändern oder neue neben deinen anderen anlegen. Nichts zu installieren, und «Rückgängig» nimmt jede Änderung zurück.
Ja. Bette ihn mit einem iframe ein und tausche Zeichnungen per postMessage aus, oder lass ihn jede gespeicherte Fassung per Webhook an deinen Server senden. Beispiele findest du unter Den Editor auf deiner eigenen Website nutzen.
Nein. Der Editor ist kostenlos, ohne Werbung und ohne Anmeldung.