Code
L’éditeur SVG affiche votre dessin et son code côte à côte. Tout ce que vous changez dans le code apparaît aussitôt dans l’aperçu - et tout ce que vous déplacez, redimensionnez ou recolorez sur le canevas se retrouve dans le code. Ajuster des icônes, des logos, des graphiques et des illustrations devient ainsi rapide, sans ouvrir un gros logiciel de graphisme.
Tout fonctionne dans votre navigateur. Les fichiers ne sont pas envoyés, il n’y a ni inscription ni publicité.
Balises, attributs et valeurs dans leurs propres couleurs, numéros de ligne, indentation avec Tab, fermeture automatique des balises et un message d’erreur clair avec le numéro de ligne.
Cliquer, faire glisser, redimensionner avec les poignées, tourner, retourner, dupliquer, avancer ou reculer - rectangles, cercles, tracés, polygones, textes et groupes.
Remplissage et contour avec un sélecteur de couleur ou en valeur, opacité, épaisseur du contour, lignes en tirets, extrémités rondes ou carrées.
N’importe quel espacement de grille, dans les coordonnées propres au dessin. Les formes s’aimantent exactement sur les lignes - ou décochez « Aimanter » pour les déplacer librement.
Rectangle, ellipse, cercle, ligne, main levée et texte - avec les couleurs de votre choix pour les nouvelles formes.
SVG (tel qu’écrit, mis en ordre ou réduit), PNG avec fond transparent, JPG, WebP, data URI, Base64, CSS et composant React.
Toute page https (et localhost) peut intégrer l’éditeur avec une <iframe> et ?embed=1 - sans inscription, sans clé. Intégré, l’éditeur masque ce texte et affiche un bouton Enregistrer. Il y a deux façons de faire entrer et sortir le dessin.
src= ouvre un fichier (votre serveur doit autoriser CORS), webhook= fait envoyer le dessin à cette adresse par « Enregistrer » (Ctrl+S). Ajoutez &token=… pour un en-tête Authorization: Bearer … et &auto pour enregistrer après chaque modification.
<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>Le webhook reçoit un POST avec du JSON { editor, event: "save", id, name, content, updated }. Un petit script PHP qui l’enregistre :
<?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’éditeur annonce svgeditor:ready, votre page répond par svgeditor:load, l’éditeur signale svgeditor:loaded, svgeditor:change lors de vraies modifications et svgeditor:save quand l’utilisateur enregistre. Votre page peut envoyer svgeditor:get (l’état actuel) ou svgeditor:save (appuyer sur Enregistrer). L’enregistrement passe alors par votre propre connexion et votre propre 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') { // l’éditeur est prêt : on lui transmet le dessin
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'; // une vraie modification
if (m.type === 'svgeditor:save') { // l’utilisateur a cliqué sur "Save"
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Un bouton d’enregistrement sur votre propre page : la réponse arrive sous forme de svgeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'svgeditor:get' }, ORIGIN); }
</script>L’assistant IA dans votre page : il fonctionne aussi dans le cadre. Avec allow="clipboard-write" sur l’iframe, « Copier le prompt » utilise directement le presse-papiers (sinon l’éditeur se rabat sur l’ancienne commande de copie, ou affiche le prompt à copier à la main). Un lien envoyé par l’IA ne peut pas atteindre un éditeur intégré dans un autre site web : l’éditeur demande donc à l’IA et à l’utilisateur de coller toute la réponse de l’IA dans l’éditeur - ou d’ouvrir l’éditeur dans sa propre fenêtre.
window.open("https://svg.giit.ch/?embed=window", "svgeditor-17") ouvre l’éditeur complet dans sa propre fenêtre et échange les mêmes messages avec window.opener. Les liens d’une IA l’y atteignent. svgeditor:load peut aussi transporter context: { host, title, rules } - le prompt de l’IA indique alors où se trouve le dessin et suit vos règles - et hook: { url, token }, un webhook pour ce seul dessin, jamais stocké. Fermer la fenêtre avec des modifications non enregistrées envoie svgeditor:closing.
Transmettez à l’éditeur votre propre prompt, une adresse sur votre site et une clé pour cette session de l’éditeur. La boîte de dialogue de l’IA affiche alors « Connecté à » votre site, ce que vous indiquez à l’IA, et le choix modifier le dessin actuel ou en créer un nouveau ; Copier le prompt assemble le tout. L’IA envoie son résultat avec la clé à votre serveur, et votre page l’ouvre dans l’éditeur - un nouveau dessin s’ouvre séparément et reste dans le navigateur de l’utilisateur. Une clé par session de l’éditeur : elle reste valable tant que l’éditeur est ouvert, et l’éditeur ne la demande avec svgeditor:key-request que tant qu’il n’en a pas. L’éditeur n’envoie jamais la clé lui-même et ne la stocke jamais ; l’adresse doit être en https sur votre propre hôte ou sur un de ses sous-domaines.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // une clé par session de l’éditeur
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);
// retenez l’id de svgeditor:loaded et ignorez change/save/closing portant un autre id
// seulement tant que l’éditeur n’a pas de clé :
if (m.type === 'svgeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'svgeditor:ai', key: k.key }, ORIGIN); }
// tant que l’éditeur est ouvert, prévenez votre serveur chaque minute ; fermer l’éditeur ou la page annule la clé
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// votre serveur a un résultat (polling, SSE …) : target vaut "current" ou "new"
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - la clé de cette session de l’éditeur pour l’utilisateur connecté (appelée par votre page)
session_start(); // vérifiez que l’utilisateur a le droit de modifier ce dessin
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // ou dans votre base de données ; ?alive= remet seen à jour
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - l’IA envoie ici (sans en-têtes CORS : les IA l’appellent depuis un serveur)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // votre base de données : non annulée, vue dans les 3 dernières 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'); // votre page l’affiche avec svgeditor:load
echo '{"ok":true}';Créez des clés d’au moins 128 bits aléatoires, ne stockez que leur hash, liez chacune à l’utilisateur connecté, au dessin et à cette session de l’éditeur, créez-en une par session, ne la gardez valable que tant que votre page signale la session comme ouverte, et annulez-la quand l’éditeur ou la page se ferme.
Le protocole complet se trouve dans llms.txt - donnez-le à une IA et elle construit la connexion pour votre système. L’éditeur LaTeX fonctionne de la même façon avec le préfixe latexeditor: - latex.giit.ch.
Non. L’éditeur fonctionne entièrement dans votre navigateur. Les fichiers que vous ouvrez et votre code ne sont jamais envoyés à un serveur ; un brouillon est seulement conservé dans le stockage local de votre navigateur.
Uniquement dans votre navigateur. L’éditeur y conserve autant de dessins que vous voulez - cliquez sur le bouton dossier en haut à gauche (Mes dessins) pour les ouvrir, renommer, dupliquer, télécharger ou supprimer. Rien n’est envoyé ; effacer les données de site de votre navigateur les supprime : téléchargez ceux que vous voulez garder.
Ouvrez ou collez votre SVG, cliquez sur « Exporter », choisissez PNG, une taille (1×, 2×, 4× ou la vôtre) et cliquez sur « Télécharger ». Le fond reste transparent, sauf si vous choisissez une couleur.
Oui. Cliquez sur une forme pour la sélectionner. Vous pouvez la faire glisser, la redimensionner avec les petits carrés, la tourner, la retourner et changer sa couleur. Le code à gauche change en même temps.
La grille affiche des lignes de repère dans les coordonnées propres au dessin. Quand elle est activée, les formes que vous déplacez ou dessinez s’aimantent exactement sur les lignes de la grille. Décochez « Aimanter » pour garder la grille visible tout en déplaçant les formes librement.
Oui. Choisissez « Composant React (JSX) » dans l’export. Les attributs comme stroke-width deviennent strokeWidth, class devient className, et le composant accepte d’autres props.
Oui, n’importe quelle IA - ChatGPT, Claude, Gemini, Copilot ou l’IA de votre outil de développement. Cliquez sur « Assistant IA », puis sur « Copier le prompt », collez-le dans votre IA et dites-lui ce qu’elle doit dessiner. L’IA répond par un lien ; cliquez dessus et le dessin apparaît dans votre éditeur. Elle peut modifier le dessin ouvert ou en créer de nouveaux à côté des autres. Rien à installer, et « Annuler » revient sur chaque modification.
Oui. Intégrez-le avec une iframe et échangez les dessins par postMessage, ou laissez-le envoyer chaque version enregistrée à votre serveur avec un webhook. Voir Utiliser l’éditeur sur votre propre site web pour des exemples.
Non. L’éditeur est gratuit, sans publicité et sans inscription.