Editor de caminhos SVG
SVG Path Editor
Converte dados de caminho entre comandos absolutos e relativos, move, escala, gira e inverte, e mostra a bounding box com prévia ao vivo.
Lê um atributo `d` e devolve um transformado: absoluto ou relativo, movido, escalado, girado em torno do centro da caixa delimitadora, invertido e arredondado ao número de casas decimais que você escolher. Desenha o resultado por meio de Path2D, para que o navegador faça a matemática dos arcos do mesmo jeito que um renderizador de SVG faria, e relata a caixa delimitadora e um viewBox que você pode colar.
O atributo d de um path
Prévia
O retângulo tracejado é a caixa delimitadora e o ponto vermelho é o ponto inicial. O preenchimento usa a regra nonzero.
Resultado
Comandos
18
Subcaminhos
3
Números
32
Bytes
113 → 97
Caixa delimitadora
x 2,00 y 2,00 w 20,00 h 20,00
viewBox
2.00 2.00 20.00 20.00
O que ele faz
- · É lido com o mesmo analisador do otimizador de SVG, então a notação comprimida como
1.5.5e as flags dos arcos são lidas direito. Ele converte entre absoluto e relativo, arredonda casas decimais, move, escala e gira em torno do centro da caixa delimitadora, inverte a direção e calcula a caixa delimitadora. - · Ao girar,
HeVviramL, e os raios de um arco, sua rotação no eixo x e sua flag de varredura são recalculados com as fórmulas do apêndice F.6 do SVG 1.1. A caixa delimitadora sai dos extremos reais de cada curva, não dos seus pontos de controle. - · Ele não simplifica curvas. Isso muda a forma, e escolher a tolerância é uma decisão humana.
Para encolher um arquivo inteiro, o otimizador de SVG; para ajustar como uma curva acelera, o editor de curvas de easing.
Como usar
Cole o atributo d
Só o valor, sem o `<path>` ao redor. Notação comprimida serve — `1.5.5` como dois números, sinalizadores de arco sem separador — porque o parser é o do otimizador de SVG e trata esses casos.
Aplique a transformação de que precisa
Mover, escalar e girar são aplicados à própria geometria, então o que sai não precisa de atributo `transform`. A rotação é em torno do centro da caixa delimitadora, que é o que você quer para um ícone e não é o que um `rotate()` cru faz.
Escolha absoluto ou relativo, e a precisão
Comandos relativos normalmente são mais curtos, o que importa para um ícone inline. A precisão é a alavanca real de tamanho: três casas decimais são mais do que suficientes para uma grade de ícone de 24 unidades, e cair de seis para duas muitas vezes reduz a string à metade. Observe o contador de bytes enquanto move.
Inverta a direção se um preenchimento parecer errado
O ponto vermelho marca o ponto inicial, então o efeito de uma inversão fica visível. A direção é o que decide se um subcaminho interno é um buraco sob a regra nonzero, e é também o que uma animação de stroke-dash segue.
Pegue o caminho, ou o viewBox
A caixa de saída tem o valor `d` e um elemento `<path>` pronto. O painel de estatísticas tem a caixa delimitadora como uma string de viewBox, que é o jeito mais rápido de fazer um ícone preencher exatamente o seu quadro.
Perguntas frequentes
Por que ele não simplifica a curva?
Porque a simplificação muda a forma, e quanta mudança é aceitável é um julgamento sobre este desenho em particular que uma ferramenta não consegue fazer. Todo algoritmo de redução de pontos recebe uma tolerância, e o lugar honesto para essa decisão é um editor vetorial, onde você consegue ver o que ela custa. Arredondar decimais é a alavanca segura de tamanho, e ela está aqui.
O que acontece com os arcos quando giro ou escalo?
Continuam arcos. Os raios, a rotação do eixo x e o sinalizador de varredura são recalculados com as fórmulas do apêndice F.6 do SVG 1.1, que é o que mantém corretos os eixos de uma elipse sob uma escala não uniforme. `H` e `V` viram `L` sob rotação, porque uma linha horizontal não continua horizontal.
A caixa delimitadora vem dos pontos de controle?
Não, dos extremos reais de cada curva. Um ponto de controle de uma cúbica normalmente fica fora da curva, então uma caixa por pontos de controle é grande demais — muitas vezes de forma perceptível, que é exatamente quando importa, porque a caixa é o que você cola como viewBox.
Ele só trata um caminho. E um arquivo inteiro?
Isto trabalha sobre um único valor `d` por projeto — é o nível em que as transformações e a inversão fazem sentido. Para um documento inteiro, o otimizador de SVG reescreve cada caminho nele, e o editor de SVG lê a estrutura ao redor deles.
Pode receber de
Otimizador de SVG
SVG Optimiser
Remove sobras de editor, achata transformações e arredonda a precisão dos caminhos, mostrando a diferença renderizada.
Imagem para SVG
Image to SVG
Vetoriza um bitmap em caminhos SVG, afinado para logotipos e desenhos de linha, não para fotografias.
Editor de curvas de easing
Easing Curve Editor
Edita uma curva cubic-bezier ou de mola contra uma prévia animada e gera a função de tempo CSS.
Editor e explicador de SVG
SVG Editor and Explainer
Edita um SVG ao lado da renderização ao vivo e explica o arquivo: viewBox e escala, transformações, cada comando de caminho, pintura herdada, bytes desperdiçados e o que quebra num <img>, num data URI ou inline.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Editor de curvas de easing
Easing Curve Editor
Edita uma curva cubic-bezier ou de mola contra uma prévia animada e gera a função de tempo CSS.
Imagem para SVG
Image to SVG
Vetoriza um bitmap em caminhos SVG, afinado para logotipos e desenhos de linha, não para fotografias.
Otimizador de SVG
SVG Optimiser
Remove sobras de editor, achata transformações e arredonda a precisão dos caminhos, mostrando a diferença renderizada.
SVG para PNG
SVG to PNG
Renderiza um SVG em PNG, JPEG ou WebP em qualquer fator de escala, com fundo transparente ou preenchido.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.