Editor visual de caminhos SVG (Path)

O elemento path do SVG descreve sua forma com um atributo d como «M 100 100 C 150 50 …», e escrever à mão essas coordenadas e pontos de controle Bézier é muito fácil de errar. Este editor oferece uma tela de 500 × 500 onde você monta o caminho clicando e arrastando, enquanto o painel da direita gera na hora o código d do SVG e uma regra CSS clip-path: path(). Use para ícones, rascunhos de logotipo, recortes irregulares de imagens ou simplesmente para aprender como os comandos de caminho do SVG funcionam.

No modo «Adicionar pontos», clique na tela para colocar uma âncora. O primeiro ponto é o início (M), e os seguintes são, por padrão, nós de curva (C) com duas alças de controle azuis. Mude para «Selecionar e mover» para arrastar as âncoras verdes em forma de trevo ou as alças e ajustar a direção e a profundidade de cada curva. Com um nó selecionado, o menu «Tipo de curva do ponto» o transforma em vértice angular (L) ou curva de Bézier (C). Em «Remover pontos», um clique na âncora a apaga. Funciona com mouse, trackpad ou tela sensível ao toque.

Ative «Alinhar à grade» e as âncoras se prendem a uma grade de 20 pixels, o que facilita formas simétricas ou alinhadas; o fundo quadriculado pode ser exibido ou ocultado a qualquer momento. «Fechar caminho (Z)» liga o último ponto ao primeiro e cria uma forma fechada que pode ser preenchida. Se preferir não começar do zero, carregue os modelos de coração, estrela, gota de água ou silhueta do Alpa e ajuste. Todas as coordenadas são arredondadas para números inteiros, então o código gerado fica curto e pronto para colar.

O atributo d usa um sistema de coordenadas de 0 a 500, então combine com viewBox="0 0 500 500" no seu SVG e a forma acompanhará o tamanho dele. O CSS clip-path: path() funciona de outro jeito: as coordenadas são em pixels e não escalam com o elemento, por isso ele se encaixa melhor em um elemento de 500 × 500 pixels. Para um recorte responsivo, use um clipPath do SVG com clipPathUnits ou redimensione o elemento com transform. Tudo roda no navegador e nada é enviado.