O que é Editor SVG?

Desenhe formas, caminhos e texto em uma tela visual, ajuste cores de preenchimento e contorno e exporte o código SVG. Sem necessidade de software desktop.

As ferramentas incluem retângulo, elipse, linha, traçado livre, texto e uma biblioteca de formas (triângulo, hexágono, estrela, seta). O texto é editado direto no canvas — toque na ferramenta de texto e digite, ou clique duas vezes em qualquer texto existente para alterá-lo. Cada elemento guarda seu próprio preenchimento, cor e espessura de traço, e opacidade, e você pode digitar X, Y, largura e altura exatos no painel de propriedades. Importe um SVG existente com um clique, alinhe o desenho a uma grade de 10 px e desfaça ou refaça em até cinquenta passos. Exporte o resultado como código SVG simples para HTML e React JSX, ou como PNG rasterizado para lugares que não aceitam SVG.

Como usar

1. Selecione uma ferramenta de desenho (retângulo, elipse, linha, caminho ou texto) e desenhe na tela.
2. Selecione elementos para mover, redimensionar, rotacionar ou alterar o preenchimento, contorno e opacidade.
3. Exporte o gráfico finalizado como arquivo SVG ou copie o código SVG bruto.

Quando usar

• Esboçar um logotipo, separador ou forma de destaque pontual para uma landing page.
• Ajustar à mão um SVG existente sem precisar abrir um programa de desktop pesado.
• Ensinar fundamentos de SVG mostrando como o código muda enquanto você desenha.

Resultado

Um desenvolvedor web precisa de uma marca simples de logotipo — dois círculos sobrepostos com preenchimento gradiente. Ele desenha as formas na tela, aplica as cores e copia o código SVG diretamente no HTML.

Perguntas frequentes

Dá para colar o SVG copiado direto no meu JSX do React?

Sim, com um detalhe: atributos como stroke-width e stop-color precisam virar strokeWidth e stopColor em JSX. O SVG copiado aqui usa kebab-case, certo para HTML simples e fácil de converter com um buscar e substituir.

Posso importar um SVG já feito para continuar editando?

Sim — use o botão Importar SVG para carregar qualquer arquivo .svg do seu dispositivo. Retângulos, elipses, círculos, linhas, traçados e texto viram elementos editáveis no canvas. Gradientes, filtros e grupos aninhados são ignorados porque o editor guarda cada forma como uma primitiva.

Por que meu SVG aparece diferente no Illustrator ou Figma?

Cada renderizador trata o alinhamento do traço, gradientes e filtros de um jeito ligeiramente diferente. A saída daqui bate com o que qualquer navegador moderno mostra, que é o comportamento da spec; a diferença costuma ser leitura do outro programa.

O editor suporta caminhos com curvas Bézier?

A ferramenta de traçado livre grava os pontos que você desenha e os exporta como uma polilinha. Para curvas Bézier cúbicas reais, exporte o SVG e edite o atributo d à mão, ou jogue o resultado num programa vetorial que mostra os manipuladores.

Quantos elementos dá para adicionar antes do canvas ficar lento?

Algumas centenas de formas são tranquilas em qualquer aparelho moderno. Milhares (mapas complexos ou grades de ícones) começam a engasgar porque cada arrastar repinta o canvas inteiro. Junte tudo em paths compostos se chegar nesse ponto.

Ferramentas relacionadas