Code
O Editor SVG mostra o seu desenho e o código dele lado a lado. O que você muda no código aparece na visualização na hora - e o que você move, redimensiona ou recolore na tela aparece no código. Assim fica rápido ajustar ícones, logos, gráficos e ilustrações sem abrir um programa de gráficos pesado.
Tudo roda no seu navegador. Os arquivos não são enviados, não há cadastro nem publicidade.
Tags, atributos e valores em cores próprias, números de linha, indentação com Tab, fechamento automático de tags e uma mensagem de erro clara com o número da linha.
Clique, arraste, redimensione pelas alças, gire, espelhe, duplique, traga para a frente ou envie para trás - retângulos, círculos, caminhos, polígonos, texto e grupos.
Preenchimento e contorno com seletor de cores ou como valor, opacidade, espessura do contorno, linhas tracejadas, pontas da linha redondas ou quadradas.
Qualquer espaçamento de grade, nas coordenadas do próprio desenho. As formas se encaixam exatamente nas linhas - ou desmarque "Encaixar" para movê-las livremente.
Retângulo, elipse, círculo, linha, mão livre e texto - com as cores que você escolher para novas formas.
SVG (como escrito, organizado ou compactado), PNG com fundo transparente, JPG, WebP, data URI, Base64, CSS e componente React.
Qualquer página https (e localhost) pode incorporar o editor com um <iframe> e ?embed=1 - sem cadastro, sem chave. Incorporado, o editor oculta este texto e mostra um botão Salvar. Há dois jeitos de levar o desenho para dentro e para fora.
src= abre um arquivo (seu servidor precisa permitir CORS), webhook= faz "Salvar" (Ctrl+S) enviar o desenho para esse endereço. Acrescente &token=… para um cabeçalho Authorization: Bearer … e &auto para salvar após cada alteração.
<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>O webhook recebe um POST com JSON { editor, event: "save", id, name, content, updated }. Um pequeno script PHP que o 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}';O editor diz svgeditor:ready, a sua página responde com svgeditor:load, o editor informa svgeditor:loaded, svgeditor:change em edições reais e svgeditor:save quando o usuário salva. A sua página pode enviar svgeditor:get (o estado atual) ou svgeditor:save (apertar Salvar). Salvar passa então pelo seu próprio login e sessão.
<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') { // o editor está pronto: entregue o desenho a ele
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'; // uma edição real
if (m.type === 'svgeditor:save') { // o usuário clicou em "Salvar"
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Um botão de salvar na sua própria página: a resposta chega como svgeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'svgeditor:get' }, ORIGIN); }
</script>Assistente de IA dentro da sua página: ele também funciona no frame. Com allow="clipboard-write" no iframe, "Copiar prompt" usa a área de transferência diretamente (senão o editor recorre ao antigo comando de copiar, ou mostra o prompt para copiar à mão). Um link enviado pela IA não alcança um editor dentro de outro site, então o editor pede à IA e ao usuário que colem a resposta inteira da IA no editor - ou abram o editor em uma janela própria.
window.open("https://svg.giit.ch/?embed=window", "svgeditor-17") abre o editor completo em uma janela própria e troca as mesmas mensagens com window.opener. Os links de uma IA chegam até ele ali. svgeditor:load também pode levar context: { host, title, rules } - o prompt da IA então diz a que lugar o desenho pertence e segue as suas regras - e hook: { url, token }, um webhook só para este desenho que nunca é guardado. Fechar a janela com alterações não salvas envia svgeditor:closing.
Entregue ao editor o seu próprio prompt, um endereço no seu site e uma chave para esta sessão do editor. A janela de IA mostra então "Conectado a" o seu site, o que você diz à IA, e a escolha alterar o desenho atual ou criar um novo; Copiar prompt junta tudo. A IA envia o resultado com a chave para o seu servidor, e a sua página o abre no editor - um novo desenho abre separado e fica no navegador do usuário. Uma chave por sessão do editor: ela vale enquanto o editor estiver aberto, e só enquanto não tiver nenhuma o editor a pede com svgeditor:key-request. O editor nunca envia a chave por conta própria e nunca a guarda; o endereço precisa ser https no seu próprio host ou em um subdomínio dele.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // uma chave por sessão do 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);
// guarde o id de svgeditor:loaded e ignore change/save/closing com outro id
// só enquanto o editor não tiver chave:
if (m.type === 'svgeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'svgeditor:ai', key: k.key }, ORIGIN); }
// enquanto o editor estiver aberto, avise o seu servidor a cada minuto; fechar o editor ou a página invalida a chave
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// o seu servidor tem um resultado (polling, SSE …): target é "current" ou "new"
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - a chave desta sessão do editor do usuário logado (a sua página a chama)
session_start(); // verifique se o usuário pode editar este desenho
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // ou no seu banco de dados; ?alive= atualiza seen
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - a IA envia para cá (sem cabeçalhos CORS: as IAs chamam a partir de um servidor)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // o seu banco de dados: não invalidada, vista nos ú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'); // a sua página o mostra com svgeditor:load
echo '{"ok":true}';Crie chaves com pelo menos 128 bits aleatórios, guarde só o hash delas, vincule cada uma ao usuário logado, ao desenho e a esta sessão do editor, crie uma por sessão, mantenha-a válida só enquanto a sua página informar que a sessão está aberta, e invalide-a quando o editor ou a página fechar.
O protocolo completo está em llms.txt - entregue-o a uma IA e ela monta a conexão para o seu sistema. O Editor LaTeX funciona do mesmo jeito com o prefixo latexeditor: - latex.giit.ch.
Não. O editor roda inteiramente no seu navegador. Os arquivos que você abre e o seu código nunca são enviados a um servidor; um rascunho fica guardado só no armazenamento local do seu navegador.
Só no seu navegador. O editor guarda lá quantos desenhos você quiser - clique no botão de pasta no canto superior esquerdo (Meus desenhos) para abrir, renomear, duplicar, baixar ou excluir os desenhos. Nada é enviado; limpar os dados do site no navegador os apaga, então baixe os que você quer manter.
Abra ou cole o seu SVG, clique em "Exportar", escolha PNG, escolha um tamanho (1×, 2×, 4× ou personalizado) e clique em "Baixar". O fundo continua transparente, a não ser que você escolha uma cor.
Sim. Clique em uma forma para selecioná-la. Você pode arrastá-la, redimensioná-la pelos quadradinhos, girar, espelhar e mudar a cor dela. O código à esquerda muda junto.
A grade mostra linhas-guia nas coordenadas do próprio desenho. Quando ela está ligada, as formas que você move ou desenha se encaixam exatamente nas linhas da grade. Desmarque "Encaixar" para manter a grade visível, mas mover as formas livremente.
Sim. Escolha "Componente React (JSX)" na exportação. Atributos como stroke-width viram strokeWidth, class vira className, e o componente aceita outras props.
Sim, qualquer IA - ChatGPT, Claude, Gemini, Copilot ou a IA da sua ferramenta de programação. Clique em "Assistente de IA", depois em "Copiar prompt", cole na sua IA e diga o que ela deve desenhar. A IA responde com um link; clique nele e o desenho aparece no seu editor. Ela pode alterar o desenho aberto ou criar novos ao lado dos outros. Nada para instalar, e "Desfazer" desfaz qualquer alteração.
Sim. Incorpore-o com um iframe e troque desenhos com postMessage, ou deixe-o enviar cada versão salva ao seu servidor com um webhook. Veja exemplos em Use o editor no seu próprio site.
Não. O editor é gratuito, sem anúncios e sem cadastro.