Code
El Editor de SVG muestra tu dibujo y su código uno al lado del otro. Lo que cambias en el código aparece al instante en la vista previa, y lo que mueves, redimensionas o recoloreas en el lienzo se refleja en el código. Así ajustas iconos, logotipos, gráficos e ilustraciones rápidamente, sin abrir un gran programa de gráficos.
Todo se ejecuta en tu navegador. Los archivos no se suben, no hay registro ni publicidad.
Etiquetas, atributos y valores con sus propios colores, números de línea, sangría con Tab, cierre automático de etiquetas y un mensaje de error claro con el número de línea.
Haz clic, arrastra, cambia el tamaño con los tiradores, gira, voltea, duplica, trae adelante o envía atrás: rectángulos, círculos, trazados, polígonos, texto y grupos.
Relleno y contorno con un selector de color o como valor, opacidad, grosor del contorno, líneas discontinuas, extremos de línea redondeados o cuadrados.
Cualquier espaciado de cuadrícula, en las coordenadas propias del dibujo. Las formas se ajustan exactamente a las líneas, o desmarca «Ajustar» para moverlas libremente.
Rectángulo, elipse, círculo, línea, mano alzada y texto, con los colores que elijas para las formas nuevas.
SVG (tal cual, ordenado o reducido), PNG con fondo transparente, JPG, WebP, data URI, Base64, CSS y componente de React.
Cualquier página https (y localhost) puede integrar el editor con un <iframe> y ?embed=1, sin registro y sin clave. Integrado, el editor oculta este texto y muestra un botón Guardar. Hay dos formas de meter y sacar el dibujo.
src= abre un archivo (tu servidor debe permitir CORS), webhook= hace que «Guardar» (Ctrl+S) envíe el dibujo a esa dirección. Añade &token=… para una cabecera Authorization: Bearer … y &auto para guardar después de cada cambio.
<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>El webhook recibe un POST con JSON { editor, event: "save", id, name, content, updated }. Un pequeño script PHP que lo guarda:
<?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}';El editor dice svgeditor:ready, tu página responde con svgeditor:load, el editor informa con svgeditor:loaded, con svgeditor:change en cada edición real y con svgeditor:save cuando el usuario guarda. Tu página puede enviar svgeditor:get (el estado actual) o svgeditor:save (pulsar Guardar). Así el guardado pasa por tu propio inicio de sesión y tu sesión.
<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') { // el editor está listo: pásale el dibujo
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 edición real
if (m.type === 'svgeditor:save') { // el usuario hizo clic en «Guardar»
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Un botón de guardar en tu propia página: la respuesta llega como svgeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'svgeditor:get' }, ORIGIN); }
</script>Asistente de IA dentro de tu página: también funciona en el marco. Con allow="clipboard-write" en el iframe, «Copiar prompt» usa el portapapeles directamente (si no, el editor recurre al antiguo comando de copiar o muestra el prompt para copiarlo a mano). Un enlace que envía la IA no puede llegar a un editor dentro de otro sitio web, así que el editor indica a la IA y al usuario que peguen la respuesta completa de la IA en el editor, o que abran el editor en una ventana propia.
window.open("https://svg.giit.ch/?embed=window", "svgeditor-17") abre el editor completo en su propia ventana y usa los mismos mensajes con window.opener. Ahí sí le llegan los enlaces de una IA. svgeditor:load también puede llevar context: { host, title, rules } (el prompt de IA dice entonces a dónde pertenece el dibujo y sigue tus reglas) y hook: { url, token }, un webhook solo para este dibujo que nunca se guarda. Al cerrar la ventana con cambios sin guardar se envía svgeditor:closing.
Pasa al editor tu propio prompt, una dirección en tu sitio y una clave para esta sesión del editor. El diálogo de IA muestra entonces «Conectado a» tu sitio, lo que le dices a la IA y la opción cambiar el dibujo actual o crear uno nuevo; Copiar prompt lo junta todo. La IA envía su resultado con la clave a tu servidor, y tu página lo abre en el editor: un dibujo nuevo se abre aparte y se queda en el navegador del usuario. Una clave por sesión del editor: sigue siendo válida mientras el editor esté abierto, y solo mientras no tenga ninguna el editor la pide con svgeditor:key-request. El editor nunca envía la clave por sí mismo ni la guarda; la dirección debe ser https en tu propio host o en un subdominio suyo.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // una clave por sesión del 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);
// recuerda el id de svgeditor:loaded e ignora change/save/closing con otro id
// solo mientras el editor no tenga clave:
if (m.type === 'svgeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'svgeditor:ai', key: k.key }, ORIGIN); }
// mientras el editor esté abierto, avisa a tu servidor cada minuto; cerrar el editor o la página anula la clave
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// tu servidor tiene un resultado (polling, SSE …): target es «current» o «new»
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - la clave de esta sesión del editor del usuario con sesión iniciada (la llama tu página)
session_start(); // comprueba que el usuario puede editar este dibujo
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // o en tu base de datos; ?alive= vuelve a fijar seen
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - la IA envía aquí (sin cabeceras CORS: las IA lo llaman desde un servidor)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // tu base de datos: no anulada, vista en los últimos 3 minutos
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'); // tu página lo muestra con svgeditor:load
echo '{"ok":true}';Crea claves con al menos 128 bits aleatorios, guarda solo su hash, vincula cada una al usuario con sesión iniciada, al dibujo y a esta sesión del editor, crea una por sesión, mantenla válida solo mientras tu página informe de que la sesión está abierta, y anúlala cuando se cierre el editor o la página.
El protocolo completo está en llms.txt: dáselo a una IA y construirá la conexión para tu sistema. El Editor de LaTeX funciona igual con el prefijo latexeditor:: latex.giit.ch.
No. El editor se ejecuta por completo en tu navegador. Los archivos que abres y tu código nunca se envían a un servidor; solo se guarda un borrador en el almacenamiento local de tu navegador.
Solo en tu navegador. El editor guarda allí todos los dibujos que quieras: haz clic en el botón de carpeta arriba a la izquierda (Mis dibujos) para abrirlos, renombrarlos, duplicarlos, descargarlos o eliminarlos. No se sube nada; si borras los datos del sitio en tu navegador, desaparecen, así que descarga los que quieras conservar.
Abre o pega tu SVG, haz clic en «Exportar», elige PNG, escoge un tamaño (1×, 2×, 4× o el tuyo) y haz clic en «Descargar». El fondo se queda transparente salvo que elijas un color.
Sí. Haz clic en una forma para seleccionarla. Puedes arrastrarla, cambiar su tamaño con los cuadraditos, girarla, voltearla y cambiar su color. El código de la izquierda cambia a la vez.
La cuadrícula muestra líneas guía en las coordenadas propias del dibujo. Cuando está activada, las formas que mueves o dibujas se ajustan exactamente a sus líneas. Desmarca «Ajustar» para seguir viendo la cuadrícula pero mover las formas libremente.
Sí. Elige «Componente de React (JSX)» en la exportación. Atributos como stroke-width pasan a ser strokeWidth, class pasa a ser className, y el componente acepta más props.
Sí, cualquier IA: ChatGPT, Claude, Gemini, Copilot o la IA de tu herramienta de programación. Haz clic en «Asistente de IA» y luego en «Copiar prompt», pégalo en tu IA y dile qué debe dibujar. La IA responde con un enlace; haz clic en él y el dibujo aparece en tu editor. Puede cambiar el dibujo abierto o crear otros nuevos junto a los tuyos. No hay nada que instalar, y «Deshacer» revierte cada cambio.
Sí. Intégralo con un iframe e intercambia dibujos con postMessage, o deja que envíe cada versión guardada a tu servidor con un webhook. Mira Usa el editor en tu propio sitio web para ver ejemplos.
No. El editor es gratuito, sin anuncios y sin registro.