Code
De SVG-editor toont je tekening en haar code naast elkaar. Wat je in de code wijzigt, verschijnt meteen in het voorbeeld - en wat je op het canvas verplaatst, vergroot of verkleint of van kleur verandert, zie je terug in de code. Zo pas je snel iconen, logo's, grafieken en illustraties aan zonder een groot grafisch programma te openen.
Alles draait in je browser. Bestanden worden niet geüpload, er is geen registratie en geen reclame.
Tags, attributen en waarden in eigen kleuren, regelnummers, inspringen met Tab, automatisch sluiten van tags en een duidelijke foutmelding met het regelnummer.
Klikken, slepen, de grootte wijzigen met de grepen, draaien, spiegelen, dupliceren, naar voren of naar achteren brengen - rechthoeken, cirkels, paden, veelhoeken, tekst en groepen.
Vulling en lijn met een kleurkiezer of als waarde, dekking, lijndikte, gestreepte lijnen, ronde of vierkante lijneinden.
Elke rasterafstand, in de eigen coördinaten van de tekening. Vormen springen precies op de lijnen - of zet het vinkje bij "Uitlijnen" uit om ze vrij te verplaatsen.
Rechthoek, ellips, cirkel, lijn, uit de hand en tekst - met kleuren naar keuze voor nieuwe vormen.
SVG (zoals geschreven, opgeschoond of verkleind), PNG met transparante achtergrond, JPG, WebP, data-URI, Base64, CSS en React-component.
Elke https-pagina (en localhost) kan de editor insluiten met een <iframe> en ?embed=1 - geen registratie, geen sleutel. Ingesloten verbergt de editor deze tekst en toont hij een knop Opslaan. Er zijn twee manieren om de tekening erin en eruit te krijgen.
src= opent een bestand (je server moet CORS toestaan), webhook= zorgt dat "Opslaan" (Ctrl+S) de tekening naar dat adres stuurt. Voeg &token=… toe voor een header Authorization: Bearer … en &auto om na elke wijziging op te slaan.
<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>De webhook krijgt een POST met JSON { editor, event: "save", id, name, content, updated }. Een klein PHP-script dat het opslaat:
<?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}';De editor zegt svgeditor:ready, je pagina antwoordt met svgeditor:load, de editor meldt svgeditor:loaded, svgeditor:change bij echte bewerkingen en svgeditor:save wanneer de gebruiker opslaat. Je pagina mag svgeditor:get (de huidige toestand) of svgeditor:save (op Opslaan drukken) sturen. Opslaan loopt dan via je eigen login en sessie.
<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') { // de editor is klaar: geef hem de tekening
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'; // een echte bewerking
if (m.type === 'svgeditor:save') { // de gebruiker klikte op "Opslaan"
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Een opslaanknop op je eigen pagina: het antwoord komt als svgeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'svgeditor:get' }, ORIGIN); }
</script>AI-assistent binnen je pagina: die werkt ook in het frame. Met allow="clipboard-write" op het iframe gebruikt "Prompt kopiëren" direct het klembord (anders valt de editor terug op het oude kopieercommando, of toont hij de prompt om met de hand te kopiëren). Een link die de AI stuurt, kan een editor binnen een andere website niet bereiken, dus vraagt de editor de AI en de gebruiker om in plaats daarvan het hele antwoord van de AI in de editor te plakken - of de editor in een eigen venster te openen.
window.open("https://svg.giit.ch/?embed=window", "svgeditor-17") opent de volledige editor in een eigen venster en spreekt dezelfde berichten met window.opener. Links van een AI bereiken hem daar. svgeditor:load kan ook context: { host, title, rules } meegeven - de AI-prompt zegt dan waar de tekening thuishoort en volgt je regels - en hook: { url, token }, een webhook alleen voor deze tekening die nooit wordt opgeslagen. Als het venster met niet-opgeslagen wijzigingen wordt gesloten, stuurt het svgeditor:closing.
Geef de editor je eigen prompt, een adres op je site en een sleutel voor deze editorsessie. Het AI-venster toont dan "Verbonden met" je site, wat je de AI vertelt, en de keuze de huidige tekening wijzigen of een nieuwe maken; Prompt kopiëren zet alles bij elkaar. De AI post het resultaat met de sleutel naar je server, en je pagina opent het in de editor - een nieuwe tekening opent apart en blijft in de browser van de gebruiker. Eén sleutel per editorsessie: hij blijft geldig zolang de editor open is, en alleen zolang de editor er geen heeft, vraagt hij erom met svgeditor:key-request. De editor verstuurt de sleutel nooit zelf en slaat hem nooit op; het adres moet https zijn op je eigen host of een subdomein ervan.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // één sleutel per editorsessie
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);
// onthoud de id uit svgeditor:loaded en negeer change/save/closing met een andere id
// alleen zolang de editor geen sleutel heeft:
if (m.type === 'svgeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'svgeditor:ai', key: k.key }, ORIGIN); }
// zolang de editor open is, meld het elke minuut aan je server; het sluiten van de editor of de pagina maakt de sleutel ongeldig
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// je server heeft een resultaat (polling, SSE …): target is "current" of "new"
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - de sleutel van deze editorsessie van de ingelogde gebruiker (je pagina roept het aan)
session_start(); // controleer of de gebruiker deze tekening mag bewerken
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // of in je database; ?alive= zet seen opnieuw
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - de AI post hierheen (geen CORS-headers: AI's roepen het aan vanaf een server)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // je database: niet ongeldig gemaakt, gezien in de laatste 3 minuten
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'); // je pagina toont het met svgeditor:load
echo '{"ok":true}';Maak sleutels met minstens 128 willekeurige bits, sla alleen hun hash op, koppel elke sleutel aan de ingelogde gebruiker, de tekening en deze editorsessie, maak er één per sessie, houd hem alleen geldig zolang je pagina de sessie als open meldt, en maak hem ongeldig wanneer de editor of de pagina sluit.
Het hele protocol staat in llms.txt - geef het aan een AI en die bouwt de koppeling voor je systeem. De LaTeX-editor werkt op dezelfde manier met het voorvoegsel latexeditor: - latex.giit.ch.
Nee. De editor draait volledig in je browser. Bestanden die je opent en je code worden nooit naar een server gestuurd; een concept wordt alleen in de lokale opslag van je browser bewaard.
Alleen in je browser. De editor bewaart daar zoveel tekeningen als je wilt - klik op de mapknop linksboven (Mijn tekeningen) om ze te openen, te hernoemen, te dupliceren, te downloaden of te verwijderen. Er wordt niets geüpload; als je de sitegegevens van je browser wist, verdwijnen ze, dus download de tekeningen die je wilt bewaren.
Open of plak je SVG, klik op "Exporteren", kies PNG, kies een grootte (1×, 2×, 4× of je eigen) en klik op "Downloaden". De achtergrond blijft transparant, tenzij je een kleur kiest.
Ja. Klik op een vorm om hem te selecteren. Je kunt hem slepen, de grootte wijzigen met de kleine vierkantjes, hem draaien, spiegelen en een andere kleur geven. De code links verandert mee.
Het raster toont hulplijnen in de eigen coördinaten van de tekening. Als het aan staat, springen vormen die je verplaatst of tekent precies op de rasterlijnen. Zet het vinkje bij "Uitlijnen" uit om het raster zichtbaar te houden maar vormen vrij te verplaatsen.
Ja. Kies "React-component (JSX)" bij het exporteren. Attributen zoals stroke-width worden strokeWidth, class wordt className, en de component accepteert verdere props.
Ja, elke AI - ChatGPT, Claude, Gemini, Copilot of de AI in je programmeertool. Klik op "AI-assistent", dan op "Prompt kopiëren", plak hem in je AI en zeg wat die moet tekenen. De AI antwoordt met een link; klik erop en de tekening verschijnt in je editor. De AI kan de geopende tekening wijzigen of nieuwe maken naast je andere. Niets te installeren, en "Ongedaan maken" draait elke wijziging terug.
Ja. Sluit hem in met een iframe en wissel tekeningen uit met postMessage, of laat hem elke opgeslagen versie met een webhook naar je server sturen. Zie De editor op je eigen website gebruiken voor voorbeelden.
Nee. De editor is gratis, zonder reclame en zonder registratie.