Visualizador e Editor de Caminho SVG

Visualizador e Editor de Caminho SVG

Cole qualquer atributo d de um caminho SVG e veja-o renderizado em tempo real. Esta ferramenta divide cada comando em seus parâmetros e ponto final absoluto, desenha linhas de controle e pontos vermelhos sobre a prévia, e reescreve o caminho entre coordenadas absolutas e relativas com precisão configurável. É construída para autores de SVG que desejam entender, limpar ou ajustar manualmente a string bruta d sem sair do navegador.

Como usar

1. Cole o conteúdo do seu atributo d de caminho (ou clique em “Tente um exemplo”) no campo de entrada.
2. Ajuste o viewBox para corresponder à área do canvas onde o caminho foi criado. O padrão 0 0 200 200 funciona para os exemplos integrados.
3. Defina a cor do contorno, a largura do contorno e o preenchimento para visualizar como o caminho será renderizado.
4. Escolha um modo de coordenada — manter como está, converter para absoluto ou converter para relativo — e uma precisão de 0 a 6 casas decimais.
5. Ative as superposições para mostrar ou ocultar a grade, os pontos de comando numerados, os manipuladores de controle de Bezier e a animação de desenho.
6. Copie o atributo d transformado ou baixe o SVG completo independente.

Características

• Prévia em tempo real do caminho – renderiza sua string d em uma área SVG com configuração de contorno, preenchimento e viewBox.
• Tabela de desmontagem de comandos – lista cada comando na ordem correta com seus parâmetros, argumentos rotulados e ponto final absoluto.
• Superposição de pontos de controle de Bezier – desenha linhas tracejadas e pontos vermelhos para os comandos C, S, Q e T para que você possa ver como as curvas são formadas.
• Pontos de finalização numerados – marca o início do caminho em verde e cada ponto final subsequente em azul com uma etiqueta de índice.
• Conversão absoluta ↔ relativa – reescreve toda a string d em um dos sistemas de coordenadas sem alterar a forma renderizada.
• Arredondamento de coordenadas – elimina as casas decimais de 0 a 6 para reduzir e normalizar os dados do caminho.
• Superposição da grade – linhas de grade automaticamente ajustadas e destaque dos eixos zero ligados ao viewBox.
• Comprimento do caminho – utiliza o API getTotalLength do navegador para reportar o comprimento total desenhado em unidades do viewBox.
• Animação de desenho – animação opcional de stroke-dashoffset que desenha o caminho em um loop para fins de depuração visual.
• Exportação de SVG independente – copie ou baixe um arquivo completo de SVG com o viewBox e configurações de estilo aplicadas.

Comandos de caminho suportados

• M / m – moveto: inicia um novo sub-caminho no ponto dado.
• L / l – lineto: desenha uma linha reta até o ponto dado.
• H / h – horizontal lineto: desenha uma linha horizontal até o valor x dado.
• V / v – vertical lineto: desenha uma linha vertical até o valor y dado.
• C / c – Bezier cúbico: dois pontos de controle e um ponto final.
• S / s – Bezier cúbico suave: reflete automaticamente o ponto de controle anterior.
• Q / q – Bezier quadrático: um ponto de controle e um ponto final.
• T / t – Bezier quadrático suave: reflete automaticamente o ponto de controle anterior.
• A / a – arco elíptico: raio, rotação do eixo x, bandeira de grande arco e de varredura, mais ponto final.
• Z / z – closepath: desenha uma linha reta de volta ao início do sub-caminho.