Path do SVG: leia o atributo d comando a comando

O que são os dados de um path do SVG?

Um path do SVG é uma única string longa dentro de um atributo d: uma letra, alguns números, outra letra, mais números. M move a caneta, L traça uma linha, C desenha uma curva cúbica, A desenha um pedaço de elipse e Z fecha a forma. Letras maiúsculas usam coordenadas absolutas e minúsculas usam deslocamentos a partir de onde a caneta já está. Toda arte vetorial que você vê — um conjunto de ícones, um mapa, um logotipo — é essa string.

Ela foi feita para ser escrita de forma enxuta, e a gramática leva isso bem mais longe do que quase todo mundo imagina. Separadores entre números são opcionais sempre que dois valores não puderem se confundir: um número pode começar com ponto, então um path pode dizer M.5.5 e significar duas coordenadas, e um sinal abre um número novo, de modo que 1-2 também são dois. É por isso que um SVG minificado é ilegível e continua totalmente válido.

Esta página analisa essa string do jeito que a gramática realmente define e mostra o que saiu: cada comando com seus argumentos e o ponto em que deixa a caneta, uma prévia desenhada pelo seu próprio navegador, a caixa delimitadora da curva de verdade e o path inteiro reescrito com todos os comandos relativos resolvidos.

Como usar

1. Cole o atributo d. Só os dados do path, sem a marcação em volta. Os botões de exemplo cobrem uma forma arredondada, as flags do arco, um path propositalmente enxuto e um com um erro de verdade.
2. Leia a tabela de comandos. Uma linha por comando, com os argumentos e a coordenada onde a caneta fica. Uma linha com a letra entre parênteses não tinha letra própria: é uma repetição da de cima.
3. Confira a caixa e a forma absoluta. A caixa vem da curva e não dos pontos de controle, então é a que a forma realmente ocupa. Abaixo dela, o mesmo path com todos os comandos relativos resolvidos, pronto para copiar.

As flags do arco são o canto mais estranho do formato

Um arco elíptico leva sete valores: dois raios, uma rotação, duas flags e o ponto onde terminar. As flags escolhem qual dos quatro arcos possíveis entre dois pontos você quis dizer: o grande ou o pequeno, num sentido ou no outro. E na gramática elas não são números. São literalmente os caracteres 0 e 1, o único lugar de toda a sintaxe de paths em que um valor é um caractere e não um número.

Isso tem uma consequência que ninguém espera. Como uma flag ocupa exatamente um caractere, ela não pode se grudar no que vier depois, então os separadores em volta das duas flags são opcionais. Escrever um arco como a5 5 0 0110 10 é totalmente legal: raios 5 e 5, sem rotação, depois flag 0, flag 1, e o ponto final 10 10. Parece um erro de digitação. Um analisador que quebre os argumentos por espaços e leia sete números enxerga 0110 e produz um absurdo. Dos três analisadores publicados conferidos durante a construção desta página, dois acertam e o terceiro rejeita como malformado.

A regra corta para os dois lados. Como uma flag é um caractere e não um número, 0.0 e +0 não são flags: ambos são números perfeitamente válidos e ambos são aceitos em qualquer outro ponto do mesmo path, inclusive como a própria rotação do arco. Escreva um deles onde vai uma flag e o path fica malformado. Os mesmos três analisadores também se dividem aqui: dois rejeitam, e justamente o que rejeitava a forma legal aceita esta ilegal e a transforma silenciosamente em flag 0.

Há um separador do arco que é obrigatório, e é o que vem depois da rotação. Essa assimetria tem motivo: a rotação é um número, e número é guloso. Sem um espaço ele engoliria os dígitos das flags, que é exatamente o que acontece se você tentar: a5 5 00110 10 lê a rotação como cento e dez e depois fica sem argumentos.

Do que a caixa delimitadora é realmente feita

O jeito óbvio de enquadrar uma curva é pegar os extremos dos pontos de controle, e ele está errado. Uma curva cúbica nem passa pelos seus dois pontos de controle do meio: é puxada na direção deles e fica aquém. Enquadre assim e a caixa sai grande demais, às vezes bastante.

A daqui vem da curva. Os pontos mais íngremes e mais planos de uma cúbica ficam onde sua derivada é zero, e essa derivada é uma quadrática com no máximo duas raízes por eixo; a derivada de uma curva quadrática é linear e tem uma. Um arco vira onde a elipse paramétrica vira, o que são dois ângulos que precisam ser conferidos contra o pedaço de elipse que está de fato sendo desenhado. Tudo isso é calculado em forma fechada e depois conferido, na bateria de testes, contra percorrer a mesma curva em dois mil passos e pegar o mínimo e o máximo. Forma fechada contra força bruta é uma conferência de verdade: concordar com uma segunda cópia da mesma álgebra não provaria nada.

Um detalhe que de início parece um bug: um comando de movimento levanta a caneta, então o ponto de onde ela saiu não faz parte da forma. Incluí-lo coloca a origem na caixa de todo path que comece em outro lugar, que é exatamente o erro que esta página tinha até a conferência por amostragem pegá-lo.

O que esta ferramenta não faz

Ela não edita o path. Não há alças para arrastar nem simplificação, porque aqui a ideia é ler o que um path diz, não criar um novo. A conversão para absoluto é a única reescrita oferecida, e é propositalmente sem perdas: nada de arredondar além de seis casas, de fundir comandos ou de reordená-los.

Ela não aplica transformações, traços nem marcadores. Um atributo transform no elemento, ou em qualquer ancestral, move o conjunto inteiro; um traço o alarga em meia espessura para todos os lados, e mais ainda num canto agudo. A caixa daqui é a geometria do path em si, que costuma ser o que um viewBox quer e não é o que a tinta desenhada ocupa.

Ela também para na primeira coisa que não consegue analisar. Isso é uma escolha, não uma limitação do formato: a especificação diz que um renderizador deve desenhar o path até o erro e não além, então um path quebrado não fica em branco, fica truncado. Ver onde a análise parou costuma bastar para achar o erro, e a posição do caractere é informada.

Por que é grátis?

Analisar uma string e resolver uma equação do segundo grau são coisas que seu navegador faz em microssegundos. Não há servidor no meio, então não há o que cobrar nem conta a criar.

Nada é enviado. O path que você cola fica nesta aba, e a prévia é desenhada pelo seu próprio navegador a partir dessa mesma string.