Editor de Caminhos SVG
Um editor de caminhos SVG interativo que permite arrastar pontos de controle visualmente, ver análises de comandos codificados por cores (M, L, C, Q, A, Z), visualizar formas em tempo real e copiar o código SVG com um clique. Inclui 8 caminhos de exemplo e um cheatsheet completo. Gratuito, sem cadastro, 100% no navegador.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 90"> <path d="M 10 80 L 50 10 L 90 80 Z" fill="none" stroke="#3b82f6" stroke-width="2" /> </svg>
M 10 80 L 50 10 L 90 80 Z
Tem uma sugestão?
Solicite uma nova ferramenta ou sugira melhorias — junte-se à nossa comunidade no Slack!
O que é um Editor de Caminhos SVG?
Um Editor de Caminhos SVG é uma ferramenta visual para criar e editar o atributo d de elementos SVG <path>. Caminhos SVG usam uma mini-linguagem de comandos (M para mover, L para linha, C para Bézier cúbica, Q para Bézier quadrática, A para arco, Z para fechar) para definir formas complexas. Este editor oferece pontos de controle interativos, pré-visualização em tempo real, visualização de comandos codificados por cores e exportação instantânea de código.
Como Usar o Editor de Caminhos SVG
- Escolha um caminho de exemplo (Triângulo, Coração, Estrela, etc.) ou cole seu atributo SVG path d
- Arraste os pontos de controle na pré-visualização para modificar a forma interativamente
- Ajuste cor de preenchimento, cor do traço e largura do traço usando os controles de estilo
- Alterne a visibilidade da grade e dos pontos de controle para edição precisa
- Mude para a aba Visualizador para ver a análise codificada por cores de cada comando
- Copie o código SVG gerado ou o atributo path d com um clique
Perguntas Frequentes
Quais comandos de caminho SVG este editor suporta?
Este editor suporta todos os comandos padrão de caminho SVG: M (mover), L (linha), H (linha horizontal), V (linha vertical), C (Bézier cúbica), S (cúbica suave), Q (Bézier quadrática), T (quadrática suave), A (arco) e Z (fechar). Variantes absolutas (maiúsculas) e relativas (minúsculas) são suportadas.
Posso arrastar e editar pontos de controle Bézier?
Sim. O editor exibe pontos arrastáveis para pontos finais (vermelho) e alças de controle (âmbar). Você pode clicar e arrastar qualquer ponto para remodelar o caminho interativamente. Os dados do caminho são atualizados em tempo real.
Meus dados SVG são enviados para algum servidor?
Não. Toda edição e renderização acontece 100% no seu navegador. Nenhum dado é transmitido para qualquer servidor.
Qual a diferença entre comandos absolutos e relativos em caminhos SVG?
Comandos absolutos (maiúsculas: M, L, C) usam coordenadas relativas à origem do canvas SVG (0,0). Comandos relativos (minúsculas: m, l, c) usam coordenadas relativas à posição atual da caneta. Por exemplo, 'L 50 50' desenha uma linha até o ponto absoluto (50,50), enquanto 'l 50 50' desenha uma linha 50 unidades à direita e 50 unidades abaixo da posição atual.
Meus dados SVG são enviados para algum servidor?
Não. Toda edição e renderização acontece 100% no seu navegador. Nenhum dado é transmitido para qualquer servidor. Você pode verificar isso na aba Network do DevTools do seu navegador.