⚡ Conversor de Coordenadas SVG Relativas para Absolutas
Converta comandos de caminhos SVG (d="...") entre coordenadas relativas (minúsculas) e absolutas (maiúsculas)
📑 Índice do Conteúdo
O que são Comandos de Caminhos SVG (SVG Path Data) e por que convertê-los?
No formato vetorial SVG (Scalable Vector Graphics), o elemento <path d="..."> é o comando mais poderoso para desenhar formas livres, ícones e ilustrações. Os comandos dentro do atributo d definem a trajetória da “caneta virtual” que traça linhas e curvas na tela.
A especificação SVG divide os comandos em duas modalidades:
- Coordenadas Absolutas (Letras MAIÚSCULAS: `M, L, H, V, C, S, Q, T, A, Z`): Cada ponto é posicionado diretamente em relação à origem $(0, 0)$ do sistema de coordenadas do SVG.
- Coordenadas Relativas (Letras minúsculas: `m, l, h, v, c, s, q, t, a, z`): Cada ponto é deslocado em relação à posição final deixada pelo comando anterior.
O Conversor SVG Path do Web-ZoneWare rastreia dinamicamente a posição da caneta e recalcula toda a trajetória vetorial, permitindo alternar bidirecionalmente entre coordenadas absolutas e relativas, arredondar casas decimais excessivas e pré-visualizar a forma renderizada em tempo real.
Tabela dos Comandos Fundamentais de SVG Path
| Comando Absoluto | Comando Relativo | Nome da Operação | Parâmetros da Trajetória |
|---|---|---|---|
M x y |
m dx dy |
Move To (Mover a Caneta) | Inicia um novo subcaminho nas coordenadas especificadas |
L x y |
l dx dy |
Line To (Linha Reta) | Traça uma linha reta até o ponto final |
H x / V y |
h dx / v dy |
Linha Horizontal / Vertical | Linhas ortogonais econômicas de parâmetro único |
C x1 y1, x2 y2, x y |
c dx1 dy1, dx2 dy2, dx dy |
Curva Bézier Cúbica | Curva suave com dois pontos de controle independentes |
Q x1 y1, x y |
q dx1 dy1, dx dy |
Curva Bézier Quadrática | Curva simplificada com um ponto de controle |
A rx ry x-rot laf sf x y |
a rx ry x-rot laf sf dx dy |
Arco Elíptico (Arc) | Traça arcos circulares e elipses precisas |
Z ou z |
z |
Close Path (Fechar Caminho) | Conecta o ponto atual de volta ao ponto inicial do subcaminho |
Quando usar Absoluto vs Relativo?
- Por que converter para Absoluto? Facilita a edição manual de ícones, a rotação de pontos específicos, cálculos em bibliotecas de animação como GSAP (MorphSVG) e manipulação matemática via scripts.
- Por que converter para Relativo? Torna a forma independente de uma posição fixa na tela, permitindo copiar e colar o mesmo caminho em diferentes locais ou reduzir o peso do arquivo SVG final.
Perguntas Frequentes sobre Conversão de SVG Path (FAQ)
Como o conversor calcula as coordenadas absolutas a partir de relativas?
O analisador inicia no ponto $(0, 0)$ e acumula a cada comando relativo o vetor de deslocamento $(\Delta x, \Delta y)$ sobre a posição corrente da caneta, gerando as coordenadas cartesianas absolutas exatas.
A conversão altera a aparência visual da ilustração ou ícone?
Não. A forma geométrica resultante é 100% idêntica pixel a pixel. A única diferença reside na notação interna do arquivo SVG (se os números representam posições globais ou deslocamentos parciais).
Como o arredondamento de casas decimais reduz o peso de um SVG?
Softwares de vetorização como Adobe Illustrator e Figma costumam exportar números com 6 ou mais casas decimais (ex: 12.345678). Reduzir para 2 casas decimais (12.35) reduz em até 40% o tamanho textual do arquivo sem qualquer perda perceptível a olho nu.
É seguro colar caminhos vetoriais com informações confidenciais?
Sim. O conversor e o visualizador vetorial são processados integralmente no navegador do usuário via JavaScript puro, sem qualquer conexão externa ou armazenamento em servidor.
