SVGO: otimize um SVG preservando a estrutura necessária

Para otimizar um SVG com SVGO sem prejudicar seu uso em uma página, mantenha o original, identifique a estrutura de que a página depende e teste nela uma cópia otimizada separadamente. Um arquivo menor e uma prévia independente inalterada não comprovam que seletores CSS, scripts ou referências ainda funcionam.

Nosso emblema original torna essa diferença visível. A predefinição padrão do SVGO reduziu seu código-fonte de 437 para 263 bytes, mas removeu o ID usado pelo HTML ao redor para recolorir o sol. Desativar cleanupIds produziu uma cópia de 281 bytes que manteve essa referência. Essas medições descrevem este único exemplo com SVGO 4.1.0, não uma garantia de compressão para outras artes.

O SVGO edita marcação SVG existente. Se você tem somente um PNG ou JPG, crie ou recupere primeiro a geometria vetorial. A otimização não transforma os objetos dentro de um bitmap em traçados editáveis.

Decida qual estrutura SVG você precisa manter

Antes de executar o otimizador, diferencie o que é visível do que outro documento ou aplicativo referencia. A predefinição padrão do SVGO inclui operações que alteram IDs, grupos, estilos e dados de traçados. Uma integração também pode escolher outro conjunto de plugins; por isso, confira a configuração da ferramenta que realmente processa seu arquivo.

Essas são verificações separadas. Preservar um ID não preserva todos os grupos, nós ou objetos editáveis. Da mesma forma, uma renderização correta não comprova que um editor recuperará a estrutura de camadas que você prefere. Mantenha um mestre editável e produza uma cópia de entrega para o contexto de destino.

Para símbolos reutilizáveis, o guia de sprites SVG aborda o lado consumidor da referência. Este artigo se concentra no que uma etapa de otimização pode alterar antes de esse consumidor receber o arquivo.

Reproduza uma referência CSS externa quebrada

Use uma pasta vazia de trabalho com Node.js e npm disponíveis. Salve esta ilustração feita manualmente como input.svg, incluindo a quebra de linha final. É um exemplo de teste de configuração, não um resultado de conversão do PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

Instale a versão exata usada neste exemplo e produza um novo arquivo de saída:

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

Execute isso na pasta limpa para que um svgo.config.mjs existente não forneça configurações inesperadas. O repositório oficial do SVGO documenta nomes de arquivo de saída separados e carregamento de configuração. Para um build de projeto, mantenha a versão e a configuração sob controle de versão para que uma atualização seja uma mudança deliberada.

Abra default.svg como texto. Seu círculo ainda tem um preenchimento coral, mas o ID badge-accent desapareceu. Esse ID não era referenciado dentro do documento SVG. A documentação de cleanupIds explica que o plugin remove IDs não usados e encurta os referenciados. O seletor de uma página externa está fora da entrada deste exemplo.

Para ver a consequência, coloque a marcação SVG diretamente em uma página HTML com este estilo fora do SVG:

<style>
  #badge-accent { fill: #f5bf42; }
</style>

Use uma cópia por página neste teste. O sol do SVG original fica dourado porque o seletor corresponde a ele. O sol otimizado com o padrão continua coral porque seu ID está ausente. Carregar qualquer um dos arquivos por um elemento img seria outro teste: a página hospedeira não selecionaria uma forma interna no mesmo documento.

Preserve a referência e repita o teste

Salve isto como svgo.config.mjs na mesma pasta:

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

Agora, grave outra cópia:

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

A substituição desativa esse único plugin e mantém o restante da predefinição padrão. Ela é um ponto de partida para a dependência de ID demonstrada. Não é uma configuração universalmente segura para artes arbitrárias, animações, relações de acessibilidade ou estruturas específicas de aplicativos.

Executamos os comandos acima em uma pasta limpa e, de forma independente, executamos as configurações equivalentes pela API JavaScript do SVGO 4.1.0. As saídas da CLI e da API eram idênticas byte a byte, sem quebra de linha final adicionada aos arquivos otimizados. Depois, renderizamos cada resultado em seu próprio documento HTML com a mesma regra CSS externa. O navegador informou estes resultados:

A saída que preserva o ID economizou 156 bytes, aproximadamente 35.7% deste código-fonte. Ela custou 18 bytes a mais que a saída padrão e manteve o comportamento de que precisávamos. Espaços em branco, finais de linha, versões e formatação de saída podem alterar suas contagens de bytes.

As três cópias mantiveram viewBox="0 0 160 160" neste teste. Conferimos o resultado visível e o preenchimento calculado pelo navegador. Não medimos tempo de transferência de rede nem testamos todos os navegadores, editores, recursos SVG ou integrações de build.

Ajuste as configurações para uma dependência específica

Se apenas alguns IDs são referências públicas, cleanupIds também expõe as opções preserve e preservePrefixes. Use-as quando puder nomear a dependência e repita o mesmo teste do consumidor. Se vários SVGs serão inseridos inline juntos, confira também IDs duplicados. Manter um ID já duplicado não o torna único; renomear um exige atualizar seus consumidores.

Um estilo ou script dentro do SVG pode alterar o comportamento do otimizador. A documentação de cleanupIds descreve uma proteção que recua quando esses elementos estão presentes. Não estenda essa proteção ao CSS de outro documento nem force a limpeza sem entender quais referências dependem dos IDs.

Trate a precisão numérica separadamente. Menos casas decimais podem reduzir a marcação, mas a mudança aceitável depende da escala de coordenadas da arte e do tamanho final de exibição. Inspecione pequenos espaços, cantos e curvas nos tamanhos em que o gráfico será usado. Uma verificação bem-sucedida de ID não informa nada sobre esses detalhes.

Mantenha viewBox quando seu layout depende de seu comportamento de escala. A documentação do plugin removeViewBox alerta sobre consequências de escala e recorte. Ele não está na predefinição padrão documentada usada aqui; adicioná-lo explicitamente é uma decisão separada. Evite copiar uma configuração antiga sem conferir para qual versão e predefinição ela foi escrita.

Para um contorno com muitos detalhes obtidos por vetorização, a otimização da marcação e a limpeza intencional de nós também respondem a perguntas diferentes. Use o guia de nós SVG para avaliar se a geometria precisa de simplificação e compare a silhueta após a edição. Um código-fonte menor não significa automaticamente um traçado de corte mais limpo.

Valide a cópia de entrega onde ela será usada

Depois de escolher uma configuração, coloque o arquivo otimizado no fluxo real de destino. Confira o estado padrão e quaisquer estados de hover, seleção, tema ou animação que dependem dele. Uma prévia estática pode deixar passar um seletor que só é executado após uma interação.

Para um gráfico da web, inspecione a saída final do build e também seu arquivo otimizado local. Um framework ou empacotador pode executar sua própria otimização depois. Repita o teste se a marcação entregue for diferente.

Para uma entrega editável, abra a cópia no editor pretendido e selecione as partes de que o destinatário precisa. Confirme as letras pequenas, os vazados, as cores separadas e o recorte. Mantenha o mestre de origem mesmo quando a cópia para web passar nos testes.

A otimização de arquivos também é separada da compressão para transporte. O guia de SVGZ versus SVG demonstra um ciclo de compressão e descompressão gzip que restaura bytes de origem idênticos. O SVGO altera esse código-fonte antes da entrega; o gzip pode então codificar esses bytes. Compare cada operação com seu próprio objetivo.

Quando a vetorização vem antes da otimização

Se o mestre vetorial está ausente e a única imagem original é um PNG ou JPG de imagem plana, o fluxo de imagem para vetor do PerfectVector pode ajudar a preparar uma versão candidata em SVG. Compare o resultado com a imagem original e inspecione vazados, pequenos detalhes e regiões separadas antes de aceitá-lo. Adicione os IDs ou grupos necessários à sua página depois de conferir a arte, otimize uma cópia de entrega e teste essas referências.

O PerfectVector não é um otimizador para um SVG existente e não reconstrói os seletores do seu site. Use o mestre vetorial existente quando disponível. Mantenha uma foto como raster quando seus detalhes de tons contínuos importam mais que contornos editáveis. Os guias de preparação vetorial do blog abordam essas escolhas de imagem original.

Perguntas frequentes

Desativar cleanupIds torna qualquer SVG seguro para otimizar? Não. Isso preserva os IDs contra a remoção e a minificação desse plugin, mas outros plugins ainda podem alterar estilos, grupos, formas ou dados de traçado. Valide os recursos e referências usados pelo fluxo de destino.

Por que um SVG otimizado parece correto sozinho, mas errado na minha página? A prévia independente pode não exercitar CSS ou scripts externos. No nosso exemplo, o preenchimento coral do próprio SVG foi renderizado normalmente, enquanto a recoloração dourada da página falhou porque o ID selecionado havia sido removido.

Devo otimizar meu único mestre editável? Mantenha o mestre e grave uma cópia otimizada para entrega. Um arquivo pode ser renderizado corretamente após a otimização enquanto sua estrutura de objetos se torna menos útil para edições posteriores.

SVGO consegue transformar um PNG em traçados vetoriais? Não. O SVGO processa marcação SVG. A vetorização de raster é uma operação anterior quando a arte precisa de geometria editável e não existe um mestre vetorial adequado.

Fontes

1. Repositório do SVGO — Explica instalação, saídas de linha de comando, carregamento de configuração e a API optimize.
2. Predefinição padrão do SVGO — Lista seus plugins e documenta substituições e diferenças de integração.
3. SVGO cleanupIds — Documenta remoção de IDs, minificação, opções de preservação e proteções relacionadas.
4. SVGO removeViewBox — Explica o risco de escala ao remover explicitamente o viewBox.

Mantenha a menor cópia que passe nas verificações de arte e comportamento. Se o arquivo inicial ainda não tem geometria vetorial editável, prepare um SVG a partir da sua arte raster, inspecione suas formas e preserve as referências que você adicionar antes de otimizar a cópia de entrega.