Isso é um pouco esotérico, eu só precisava fazer isso sozinha uma vez e achei confuso, então pensei em fazer um vídeo inteiro sobre isso.
Acontece que nem tudo é em SVG. é fantástico porque pode ser qualquer coisa. Mas a sintaxe dele é um pouco mais complexa do que qualquer uma das outras formas. Portanto (talvez por esse motivo?) O Illustrator sempre produz as formas em SVG com o elemento mais apropriado. Os retângulos são , outras formas feitas apenas de linhas retas são a ou, se for uma forma aberta , etc.
Isso seria bom, exceto que os métodos DOM para essas formas variam. Um elemento de caminho tem um método chamado getTotalLength()que permite saber a extensão do caminho. Isso é muito legal e às vezes útil, mas você não pode fazer isso apenas em um , nenhum outro elemento.
Uma razão pela qual você pode querer saber esse comprimento é porque você pretende animá-lo para que a forma “se desenhe” - um pequeno efeito de design legal (coleção de exemplos). Você pode fazer isso em CSS, mas é bom usar um pouco de JavaScript para aplicar esse CSS para que ele anime a distância perfeita sempre.
Digamos que você queira fazer esse efeito de desenho, mas a forma é um, então o JavaScript falha. Você pode transformar esse polígono em um caminho, sem alterá-lo visualmente, simplesmente adicionando um ponto a ele com uma alça de Bezier. Como em, clique com a ferramenta Caneta e arraste para que as alças saiam e alinhe as alças ao longo da linha que já está lá. A existência desse ponto o tornará um item de saída.
Se você faz muito isso, existe uma ferramenta chamada Poly2Path que funciona e não requer esse ponto supérfluo.