Quais comandos de caminho SVG são suportados?

Todos os comandos padrão: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z. São suportadas as variantes absolutas (superior) e relativas (inferior).

Como são mostrados os pontos de controle?

Para curvas cúbicas de bezier (C/c), dois pontos de controle azuis são conectados a cada âncora por linhas tracejadas, mostrando-lhe exatamente como a curva é moldada. Para curvas quadráticas (Q/q), um único ponto de controle roxo é mostrado. Os pontos Âncora são desenhados como pequenos pontos vermelhos.

Posso editar o caminho no visualizador?

Atualmente você edita o texto de dados do caminho e as atualizações de visualização ao vivo. Manipulação direta de pontos de controle arrastando na tela é planejada para uma atualização futura.

Visualizador de Caminhos SVG

Colar qualquer caminho SVG d-atribute e vê-lo renderizado instantaneamente com visualização ponto de controle.

Control points Grid

SVG Path Data (d attribute)

Preview

Was this tool helpful?

Send output to:

How to use SVG Path Visualizer

Colar um caminho SVG d- atribute string na caixa de entrada.
O caminho é renderizado instantaneamente no painel de visualização com viewBox calculado automaticamente.
Pontos azuis mostram pontos cúbicos de controle bezier, pontos roxos mostram pontos quadráticos de controle bezier, e pontos vermelhos mostram pontos âncora.
Alternar a sobreposição da grade para posicionamento preciso, ou usar os botões Copiar/Download para exportar seu caminho.
Edite os dados do caminho e veja os resultados atualizados em tempo real.

O que é {nome}?

SVG path data strings pode ser críptico — uma longa cadeia de letras e números que é difícil de depurar lendo sozinho. Esta ferramenta torna seus dados de caminho ao vivo, mostrando a forma real, pontos de controle para curvas bezier e pontos de âncora. É inestimável quando você está editando caminhos SVG ou depurando por que uma curva não parece como você espera.

A ferramenta suporta todos os comandos padrão do caminho SVG: M/m (move), L/l (linha), H/h (horizontal), V/v (vertical), C/c (cubic bezier), S/s (smooth cublic), Q/q (quadratic bezier), T/t (smooth quadratic), A/a (arc) e Z/z (close path). Os pontos de controle são mostrados como pontos coloridos conectados por linhas tracejadas às suas âncoras.

FAQ

Quais comandos de caminho SVG são suportados?: Todos os comandos padrão: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z. São suportadas as variantes absolutas (superior) e relativas (inferior).
Como são mostrados os pontos de controle?: Para curvas cúbicas de bezier (C/c), dois pontos de controle azuis são conectados a cada âncora por linhas tracejadas, mostrando-lhe exatamente como a curva é moldada. Para curvas quadráticas (Q/q), um único ponto de controle roxo é mostrado. Os pontos Âncora são desenhados como pequenos pontos vermelhos.
Posso editar o caminho no visualizador?: Atualmente você edita o texto de dados do caminho e as atualizações de visualização ao vivo. Manipulação direta de pontos de controle arrastando na tela é planejada para uma atualização futura.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 SVG Path Visualizer on Wikipedia·Developer Tools on Wikipedia·SVG Path Visualizer on Britannica

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-06

Visualizador de Caminhos SVG

Something went wrong

How to use SVG Path Visualizer

O que é {nome}?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts