Minificar código SVG

O que o minificador faz com o seu código

A ferramenta trabalha sobre o texto do SVG em uma ordem fixa: primeiro remove a declaração XML e o tipo de documento, depois os comentários, depois os elementos de metadados, título e descrição, em seguida arredonda os decimais e, por fim, reduz os espaços em branco. Qualquer sequência de espaços, tabulações e quebras de linha vira um único espaço, e os espaços entre uma tag de fechamento e uma de abertura são eliminados, o que resulta em uma única linha.

Antes e depois

Entrada, 126 bytes:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <!-- ponto -->
  <circle cx="8.000" cy="8.000" r="3.500"/>
</svg>

Saída com as configurações padrão, 97 bytes (economia de 23 %):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.5"/></svg>

Repare que 8.000 virou 8 e 3.500 virou 3.5: os zeros finais são removidos depois do arredondamento.

O que ela deixa intacto

Esta é uma ferramenta de minificação de texto, não um otimizador completo. Ela mantém nomes de atributos, IDs, classes, grupos, transformações e comandos de caminho como estão. Isso é intencional: IDs referenciados por CSS, scripts ou gradientes continuam funcionando, e a estrutura do arquivo continua reconhecível caso você precise editá-lo depois.

Pontos de atenção

• A redução de espaços também se aplica dentro de elementos de texto, então um rótulo com vários espaços seguidos mostrará um único espaço.
• O arredondamento se aplica a todos os números decimais, inclusive a números de versão em atributos, como 1.10, que virariam 1.1.
• Código minificado é difícil de ler. Mantenha o original em controle de versão e use a cópia minificada apenas para a saída.

Uma verificação rápida depois de minificar

Cole a linha minificada em um arquivo HTML em branco e abra no navegador ao lado do original. As duas versões devem parecer idênticas. Se um gradiente, uma máscara ou um caminho de recorte deixar de funcionar, verifique se algum ID ou referência foi alterado manualmente, pois a ferramenta não renomeia nada. Se um detalhe muito fino tiver saído do lugar, aumente a precisão numérica para 3 ou mais e execute de novo.

Onde usar o resultado

Um SVG em uma única linha se cola sem problemas em um arquivo HTML, em um componente JSX, em um data URI ou em uma regra CSS de plano de fundo, onde as quebras de linha exigiriam escape.