Visualizador de Caminho SVG
Cole um atributo `d` de caminho SVG, renderize-o ao vivo com uma grade e explore cada comando de caminho analisado.
Sobre esta ferramenta
Insira qualquer string `d` de caminho SVG e veja-a renderizada instantaneamente em um canvas com fundo de grade. A ferramenta analisa todos os comandos — M, L, C, Q, A, Z, H, V, S, T — e os lista em uma tabela de análise com suas coordenadas. Use o controle deslizante de escala para ampliar e reduzir, escolha cores de traço e preenchimento, e ative ou desative o preenchimento. As dimensões da caixa delimitadora são calculadas e exibidas. Copie o caminho como um elemento SVG `<path d="..."/>` pronto para uso com um clique.
Como usar
- 1 Cole ou digite uma string `d` de caminho SVG no campo de entrada — um caminho de amostra é pré-carregado.
- 2 Ajuste o controle deslizante de escala e escolha cores de traço/preenchimento usando os seletores.
- 3 Revise a lista de comandos analisados abaixo do canvas para entender cada segmento.
- 4 Clique em 'Copiar como elemento SVG' para obter um snippet `<path d="..."/>` pronto para o seu código.
Perguntas frequentes
Crie visualmente gradientes CSS lineares e radiais e copie a propriedade CSS pronta para uso.
Crie valores de box-shadow CSS visualmente com prévia ao vivo — suporta múltiplas camadas.
Converta cores entre HEX, RGB, HSL, HSV e CMYK — com prévia em tempo real.