Arquivo SVG grande demais? 8 dicas de compactação e otimização
Como compactar um arquivo SVG grande? 8 técnicas aplicáveis: reduzir pontos de ancoragem, unir caminhos, remover metadados, baixar a precisão, compactar com SVGO, reutilizar símbolos, controlar camadas de cor e compressão na transmissão.
Um SVG costuma ter centenas de KB ou até alguns MB, quase sempre por causa de pontos de ancoragem demais, caminhos redundantes, metadados do editor e precisão decimal alta. As 8 dicas abaixo estão ordenadas do "na origem até a entrega" e todas podem ser aplicadas na prática.
1. Nível de caminho: reduzir âncoras e unir caminhos
Dica 1: reduzir pontos de ancoragem (simplificar o caminho)
Quanto mais pontos de ancoragem, maior o arquivo e mais lenta a renderização. Aumente um pouco o suavizado na conversão para reduzir as âncoras já na origem; em SVG que você já tem, use "Objeto → Caminho → Simplificar" no Illustrator ou "Caminho → Simplificar" (Ctrl+L) no Inkscape para cortar as âncoras redundantes. Ajustar o suavizado e o número de cores na ferramenta de conversão da PolySVG também permite equilibrar efeito e volume em tempo real.
Dica 2: unir caminhos e camadas
Una em um só vários caminhos com a mesma cor de preenchimento, reduzindo atributos repetidos; achate agrupamentos aninhados sem sentido e apague camadas ocultas e elementos vazios. Nos programas de design, use o "União" do localizador de caminhos ou una as camadas antes de exportar.
2. Conteúdo do arquivo: remover metadados e baixar a precisão
Dica 3: remover metadados do editor
Os SVG exportados por Illustrator e Inkscape costumam trazer namespaces do editor, <metadata>, comentários e configurações de exportação, que nada afetam na renderização e podem ser apagados manualmente ou limpos pelo SVGO. Preserve <title> e <desc>, que ajudam na acessibilidade.
Dica 4: reduzir a precisão decimal
As coordenadas dos caminhos costumam ter 6 a 8 casas decimais, enquanto a tela precisa de 1 ou 2. Na configuração do SVGO, baixe a precisão numérica (floatPrecision) para 1 ou 2: o volume cai de forma perceptível e a diferença não aparece a olho nu. Em ícones muito pequenos, cuidado para não comprimir as coordenadas a ponto de deformar o desenho.
3. Automatização: compactar com SVGO em um clique
Dica 5: otimizar automaticamente com o SVGO
O SVGO é a ferramenta padrão de fato para otimizar SVG, com dezenas de plugins embutidos: remover comentários e metadados, unir caminhos, otimizar comandos de caminho, limpar valores e assim por diante. Uso básico:
npx svgo input.svg -o output.svg
Em arquivos típicos, a redução fica entre 30% e 70%. Fique atento a dois pontos: não remova o atributo viewBox, ou o redimensionamento quebra; e, em ícones que precisam trocar de cor por CSS, mantenha a herança de fill em vez de gravar a cor.
Compare o antes e o depois pelo tamanho do arquivo e pelo tamanho realmente transmitido nas ferramentas de desenvolvedor do navegador, para confirmar o ganho; altere apenas uma categoria de parâmetro por vez, assim é fácil descobrir o passo que introduziu algum problema.
4. Estrutura e reuso: simbolizar e controlar as camadas de cor
Dica 6: reutilizar gráficos com defs e use
Quando o mesmo ícone aparece várias vezes na página, defina-o uma vez em <defs> e referencie-o com <use>, ou monte um sprite SVG: o volume e o número de requisições caem juntos.
Dica 7: controlar as camadas de cor e evitar bitmaps embutidos
Reduza o número de cores na vetorização para diminuir as camadas; use cor sólida em vez de gradientes complicados. Evite especialmente embutir bitmaps em base64 dentro do SVG — isso transforma o arquivo vetorial em um portador de bitmap e o volume explode. Caminhos soltos deixados pela conversão podem ser apagados com o clique no editor online.
5. Entrega: compressão na transmissão e cache
Dica 8: ativar gzip/Brotli e cache
Como o SVG é texto, com gzip/Brotli no servidor o volume transmitido costuma cair mais 60% a 80%; defina cabeçalhos de cache longos para os SVG estáticos. Ícones muito pequenos podem ser embutidos direto no HTML, economizando uma requisição. O princípio está em As vantagens do SVG; e, para controlar o volume já na etapa de conversão, leia Os métodos de converter uma imagem em SVG.
A ordem importa: controle as âncoras e as camadas de cor na origem, limpe metadados e precisão no arquivo, depois passe pelo SVGO e, por fim, ative a compressão na transmissão. Com as quatro camadas somadas, o volume do SVG costuma cair uma ordem de grandeza.
Perguntas frequentes
A compactação com SVGO altera a aparência do desenho?
Na configuração padrão a diferença visual é praticamente nenhuma. Preserve o viewBox; em ícones pequenos, evite reduzir demais a precisão das coordenadas e, se necessário, desative plugins mais agressivos um a um.
Quanto um SVG costuma ser compactado?
Depende do nível de redundância: as reduções mais comuns ficam entre 30% e 70%; somadas à compressão gzip/Brotli do servidor, o volume transmitido cai mais 60% a 80%.