Editor de Caminho SVG
Visualize e inspecione dados de caminho SVG. Analise comandos de atributo d (M, L, C, Q, A, Z), configure viewBox, stroke e fill.
Examples
Live Preview
8 commands parsed
Settings
Show grid lines
Parsed Commands(8 total)
| # | Cmd | Description | Parameters |
|---|---|---|---|
| 1 | M | Move to (absolute) | 50, 30 |
| 2 | C | Cubic Bézier (absolute) | 50, 20, 35, 10, 20, 20 |
| 3 | C | Cubic Bézier (absolute) | 5, 30, 5, 50, 20, 65 |
| 4 | L | Line to (absolute) | 50, 90 |
| 5 | L | Line to (absolute) | 80, 65 |
| 6 | C | Cubic Bézier (absolute) | 95, 50, 95, 30, 80, 20 |
| 7 | C | Cubic Bézier (absolute) | 65, 10, 50, 20, 50, 30 |
| 8 | Z | Close path | — |
Como Usar Editor de Caminho SVG
- 1Cole ou digite seu atributo d de caminho SVG.
- 2Veja o caminho renderizado na visualização ao vivo.
- 3Revise comandos analisados na tabela abaixo.
- 4Ajuste as configurações de viewBox, stroke e fill conforme necessário.
ZenovayAnalytics
Analytics feito para fundadores.
- Acompanhamento de visitantes em tempo real
- Privacidade em primeiro lugar, sem banner de cookies
- Configurado em dois minutos
Ferramentas Relacionadas
Formatador e Validador de JSON
Formate, valide e embeleze dados JSON com destaque de sintaxe e detecção de erros.Decodificador JWT
Decodifique e inspecione tokens JWT. Visualize cabeçalho, payload e verifique assinaturas.Codificar/Decodificar Base64
Codifique texto para Base64 ou decodifique Base64 de volta para texto. Suporta dados UTF-8 e binários.Encode/Decode de URL
Codifique ou decodifique componentes de URL. Trate caracteres especiais, strings de consulta e URLs completas.Perguntas Frequentes
O que é um atributo d de caminho SVG?▾
O atributo d define um caminho a ser desenhado. Contém uma série de comandos como M (mover para), L (linha para), C (bezier cúbica), Q (bezier quadrática), A (arco) e Z (fechar caminho).
Quais são todos os comandos de caminho SVG?▾
M/m (moveto), L/l (lineto), H/h (linha horizontal), V/v (linha vertical), C/c (bezier cúbica), S/s (cúbica suave), Q/q (bezier quadrática), T/t (quad suave), A/a (arco), Z/z (fechar).
Qual é a diferença entre comandos de caminho SVG absolutos e relativos?▾
Comandos em maiúsculas (M, L, C) usam coordenadas absolutas da origem. Comandos em minúsculas (m, l, c) usam coordenadas relativas do ponto atual.
O que é o viewBox SVG?▾
O atributo viewBox define o sistema de coordenadas do SVG. Ele leva quatro valores: min-x, min-y, largura e altura. Controla como o conteúdo SVG dimensiona e posiciona dentro de seu contêiner.
Como posso otimizar caminhos SVG?▾
Use comandos relativos para reduzir tamanhos de coordenadas, remova precisão decimal desnecessária, combine segmentos de linha consecutivos e use comandos abreviados (H, V, S, T) quando possível.