Code
L'Editor SVG mostra il tuo disegno e il suo codice uno accanto all'altro. Tutto ciò che cambi nel codice appare subito nell'anteprima - e tutto ciò che sposti, ridimensioni o ricolori sulla tela compare nel codice. Così ritocchi in fretta icone, loghi, grafici e illustrazioni senza aprire un grande programma di grafica.
Tutto funziona nel tuo browser. I file non vengono caricati, non serve registrarsi e non c'è pubblicità.
Tag, attributi e valori nei loro colori, numeri di riga, rientro con Tab, chiusura automatica dei tag e un messaggio d'errore chiaro con il numero di riga.
Clic, trascina, ridimensiona con le maniglie, ruota, rifletti, duplica, porta avanti o indietro - rettangoli, cerchi, tracciati, poligoni, testo e gruppi.
Riempimento e contorno con il selettore di colori o come valore, opacità, spessore del contorno, linee tratteggiate, estremità arrotondate o quadrate.
Qualsiasi passo della griglia, nelle coordinate del disegno. Le forme si agganciano esattamente alle linee - oppure togli la spunta da «Aggancia» per spostarle liberamente.
Rettangolo, ellisse, cerchio, linea, mano libera e testo - con i colori che scegli per le nuove forme.
SVG (così com'è, riordinato o compresso), PNG con sfondo trasparente, JPG, WebP, data URI, Base64, CSS e componente React.
Qualsiasi pagina https (e localhost) può integrare l'editor con un <iframe> e ?embed=1 - senza registrazione, senza chiave. Integrato, l'editor nasconde questo testo e mostra un pulsante Salva. Ci sono due modi per far entrare e uscire il disegno.
src= apre un file (il tuo server deve consentire CORS), webhook= fa sì che «Salva» (Ctrl+S) invii il disegno a quell'indirizzo. Aggiungi &token=… per un'intestazione Authorization: Bearer … e &auto per salvare dopo ogni modifica.
<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>Il webhook riceve un POST con JSON { editor, event: "save", id, name, content, updated }. Un piccolo script PHP che lo salva:
<?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}';L'editor dice svgeditor:ready, la tua pagina risponde con svgeditor:load, l'editor segnala svgeditor:loaded, svgeditor:change alle modifiche reali e svgeditor:save quando l'utente salva. La tua pagina può inviare svgeditor:get (lo stato attuale) o svgeditor:save (premi Salva). Il salvataggio passa così dal tuo login e dalla tua sessione.
<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') { // l'editor è pronto: passagli il disegno
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'; // una modifica reale
if (m.type === 'svgeditor:save') { // l'utente ha fatto clic su "Salva"
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Un pulsante Salva sulla tua pagina: la risposta arriva come svgeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'svgeditor:get' }, ORIGIN); }
</script>Assistente IA nella tua pagina: funziona anche nel riquadro. Con allow="clipboard-write" sull'iframe, «Copia il prompt» usa direttamente gli appunti (altrimenti l'editor ricorre al vecchio comando di copia, o mostra il prompt da copiare a mano). Un link inviato dall'IA non può raggiungere un editor dentro un altro sito web, quindi l'editor dice all'IA e all'utente di incollare invece l'intera risposta dell'IA nell'editor - oppure di aprire l'editor in una finestra propria.
window.open("https://svg.giit.ch/?embed=window", "svgeditor-17") apre l'editor completo in una finestra propria e usa gli stessi messaggi con window.opener. Lì lo raggiungono i link di un'IA. svgeditor:load può portare anche context: { host, title, rules } - il prompt per l'IA dice allora a chi appartiene il disegno e segue le tue regole - e hook: { url, token }, un webhook solo per questo disegno che non viene mai salvato. Chiudere la finestra con modifiche non salvate invia svgeditor:closing.
Passa all'editor il tuo prompt, un indirizzo sul tuo sito e una chiave per questa sessione dell'editor. La finestra dell'IA mostra allora «Connesso a» il tuo sito, ciò che dici all'IA e la scelta modificare il disegno attuale o crearne uno nuovo; Copia il prompt mette tutto insieme. L'IA invia il risultato con la chiave al tuo server, e la tua pagina lo apre nell'editor - un nuovo disegno si apre separatamente e resta nel browser dell'utente. Una chiave per sessione dell'editor: resta valida finché l'editor è aperto, e solo finché non ne ha una l'editor la chiede con svgeditor:key-request. L'editor non invia mai la chiave di sua iniziativa e non la salva mai; l'indirizzo deve essere https sul tuo host o su un suo sottodominio.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // una chiave per sessione dell'editor
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);
// ricorda l'id da svgeditor:loaded e ignora change/save/closing con un altro id
// solo finché l'editor non ha una chiave:
if (m.type === 'svgeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'svgeditor:ai', key: k.key }, ORIGIN); }
// finché l'editor è aperto, avvisa il tuo server ogni minuto; chiudere l'editor o la pagina annulla la chiave
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// il tuo server ha un risultato (polling, SSE …): target è "current" o "new"
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - la chiave di questa sessione dell'editor dell'utente connesso (la chiama la tua pagina)
session_start(); // verifica che l'utente possa modificare questo disegno
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // o nel tuo database; ?alive= aggiorna seen
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - l'IA invia qui (niente intestazioni CORS: le IA lo chiamano da un server)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // il tuo database: non annullata, vista negli ultimi 3 minuti
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'); // la tua pagina lo mostra con svgeditor:load
echo '{"ok":true}';Crea chiavi con almeno 128 bit casuali, salvane solo l'hash, lega ciascuna all'utente connesso, al disegno e a questa sessione dell'editor, creane una per sessione, mantienila valida solo finché la tua pagina segnala la sessione come aperta, e annullala quando l'editor o la pagina si chiude.
L'intero protocollo è in llms.txt - dallo a un'IA e costruirà il collegamento per il tuo sistema. L'Editor LaTeX funziona allo stesso modo con il prefisso latexeditor: - latex.giit.ch.
No. L'editor funziona interamente nel tuo browser. I file che apri e il tuo codice non vengono mai inviati a un server; una bozza viene conservata solo nella memoria locale del tuo browser.
Solo nel tuo browser. L'editor vi conserva quanti disegni vuoi - fai clic sul pulsante a forma di cartella in alto a sinistra (I miei disegni) per aprirli, rinominarli, duplicarli, scaricarli o eliminarli. Non viene caricato nulla; cancellando i dati del sito nel browser spariscono, quindi scarica quelli che vuoi conservare.
Apri o incolla il tuo SVG, fai clic su «Esporta», scegli PNG, una dimensione (1×, 2×, 4× o personalizzata) e fai clic su «Scarica». Lo sfondo resta trasparente, a meno che tu non scelga un colore.
Sì. Fai clic su una forma per selezionarla. Puoi trascinarla, ridimensionarla con i quadratini, ruotarla, rifletterla e ricolorarla. Il codice a sinistra cambia di conseguenza.
La griglia mostra linee guida nelle coordinate del disegno. Quando è attiva, le forme che sposti o disegni si agganciano esattamente alle sue linee. Togli la spunta da «Aggancia» per lasciare visibile la griglia ma spostare le forme liberamente.
Sì. Scegli «Componente React (JSX)» nell'esportazione. Attributi come stroke-width diventano strokeWidth, class diventa className, e il componente accetta altre props.
Sì, qualsiasi IA - ChatGPT, Claude, Gemini, Copilot o l'IA del tuo strumento di programmazione. Fai clic su «Assistente IA», poi su «Copia il prompt», incollalo nella tua IA e dille cosa deve disegnare. L'IA risponde con un link; fai clic su di esso e il disegno appare nel tuo editor. Può modificare il disegno aperto o crearne di nuovi accanto agli altri. Niente da installare, e «Annulla» ritira ogni modifica.
Sì. Integralo con un iframe e scambia disegni con postMessage, oppure lascia che invii ogni versione salvata al tuo server con un webhook. Trovi esempi in Usare l'editor sul tuo sito web.
No. L'editor è gratuito, senza pubblicità e senza registrazione.