Formatação de código / MULTIVERTO
Indente uma árvore simples de elementos SVG para facilitar a edição.
Aplique cada ferramenta de texto ao resultado anterior. Fluxos de trabalho com texto ↗
Somente o nome da sequência e a ordem das ferramentas são salvos neste navegador. Sua entrada e seus resultados nunca são salvos.
01 / Exemplo
<svg xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="20"/></svg><svg xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20"/>
</svg>02 / Guia
Formate uma árvore simples de elementos SVG para facilitar a edição. O recuo e as quebras de linha expõem a estrutura, preservando os tokens de entrada suportados. Um grupo SVG aninhado dentro de outro grupo se torna mais fácil de ler quando o recuo revela a hierarquia. Geometria, coordenadas, preenchimentos e transformações são deixados como estão escritos. A saída pode, portanto, ajudar na edição manual, mas não simplificará um caminho nem reduzirá um desenho vetorial de forma agressiva.
SVG é um vocabulário XML para gráficos vetoriais. Seus elementos podem descrever geometria, texto, pintura, transformações e definições reutilizáveis, enquanto os atributos determinam o desenho efetivo. Um SVG formatado é mais fácil de examinar porque grupos e formas aninhados ficam visíveis; uma versão compacta pode reduzir os espaços em branco entre nós que contêm apenas elementos. Nenhuma das operações altera as coordenadas dos caminhos, simplifica a geometria ou remove definições não utilizadas.
A formatação é mais útil durante a revisão ou depuração, quando o recuo pode expor um nível de aninhamento ausente ou um elemento irmão inesperado. Cole um fragmento completo e representativo e execute o formatador uma vez. Leia a saída da estrutura mais externa para dentro, prestando atenção em onde cada elemento, bloco ou cláusula começa e termina. Este formatador não pretende processar todas as extensões possíveis do SVG. No exemplo, “<svg xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="20"/></svg>” produz a prévia compacta “<svg xmlns="http://www.w3.org/2000/svg"> ⏎ <circle cx="25" cy="25" r="20"/> ⏎ </svg>” (⏎ indica uma quebra de linha). Leia a pontuação, bem como as palavras visíveis: essa pequena amostra é um resultado observável desta operação em particular. Altere uma característica relevante na entrada e compare o mesmo lugar no resultado. Coloque duas formas SVG em grupos com transformações separadas. Leia o aninhamento formatado para ver qual transformação se aplica a cada forma e, em seguida, renderize ambas as versões com o mesmo viewBox e tamanho em pixels. A saída ajuda a inspeção, mas não pode detectar um caminho fora da janela visível.
Expanda um SVG pequeno para localizar grupos, formas e seus atributos antes de editar uma coordenada. Compare o ícone renderizado no tamanho real de exibição após a edição. Esta ferramenta muda o layout da marcação de origem, não a geometria do caminho, coordenadas de viewBox ou ordem de pintura; animação SVG e script incorporado requerem sua própria validação. Mantenha o original ao lado da saída e teste um pequeno exemplo conhecido antes de manipular um documento grande. Compare conteúdo significativo, não apenas o tamanho do arquivo ou o número de linhas. Verifique nomes, strings entre aspas, caracteres não ASCII, terminações de linha e quaisquer campos repetidos após a transformação.
Explorar guias