Comprima arquivos SVG

SVG é código, não pixels

Um arquivo SVG (Scalable Vector Graphics) é um documento de texto em XML que descreve formas: caminhos, círculos, degradês, texto. Como contém instruções em vez de pixels, ele fica nítido em qualquer tamanho, de um favicon de 16 pixels a um outdoor. Ícones, logotipos, ilustrações, gráficos e mapas na web muitas vezes são SVG, e o formato é um padrão do W3C desde 2001.

Ser texto tem um efeito colateral: o tamanho do arquivo depende de quão prolixo o editor foi ao escrevê-lo, e não do tamanho em que a imagem é exibida. Dois SVGs que aparecem idênticos na tela podem ter tamanhos que diferem várias vezes.

O que deixa arquivos SVG mais pesados do que o necessário

• Metadados do editor. Illustrator, Inkscape, Figma e Sketch acrescentam seus próprios namespaces, nomes de camadas, comentários de exportação e às vezes uma cópia incorporada do documento editável.
• Precisão excessiva. Coordenadas como 12.483920174, quando 12.48 é exibido exatamente igual em qualquer tamanho realista.
• Estrutura redundante. Grupos vazios, camadas ocultas, valores de atributo padrão, definições não usadas e estilos que poderiam ser mais curtos.
• Sintaxe longa de caminhos. Comandos absolutos onde os relativos seriam mais curtos, letras de comando repetidas, espaços desnecessários.
• Bitmaps incorporados. Uma foto colada em uma ilustração é guardada como texto Base64 dentro do SVG, o que ocupa cerca de um terço a mais que o arquivo de imagem original.

Como a ferramenta otimiza SVG

A ferramenta roda o SVGO, o otimizador de SVG de código aberto mais usado, no seu navegador. Ele remove metadados e comentários, desfaz grupos inúteis, encurta os dados dos caminhos, arredonda os números para 3 casas decimais por padrão (você pode escolher de 0 a 6) e une estilos, repetindo as passagens até que nada mais mude. O resultado continua sendo um SVG normal, que você pode abrir em qualquer editor ou colar em HTML. Nos nossos testes com oito SVGs, de ícones otimizados à mão a uma exportação do Inkscape cheia de dados do editor, a economia variou de 8 % a 42 %.

A otimização é tecnicamente com perdas em um sentido restrito: o arredondamento altera as coordenadas em quantidades mínimas, e os dados específicos do editor desaparecem, então não é possível reabrir o arquivo com todas as camadas originais. Guarde o arquivo-fonte da sua ferramenta de design e trate o SVG otimizado como a versão publicada.

Os servidores normalmente enviam SVG com compressão gzip ou Brotli, que reduz o texto de novo no caminho até o navegador. A otimização e a compressão do servidor se somam, porque os dados removidos nem precisam ser comprimidos.

Quando um SVG otimizado quebra

• O CSS ou o JavaScript não encontra mais um elemento. Os otimizadores encurtam ou removem IDs e nomes de classe que parecem não usados dentro do arquivo. Se os estilos ou scripts da sua página apontam para eles, confira o resultado antes de publicar.
• O ícone não muda mais de escala. Um SVG precisa do atributo viewBox para ser redimensionado corretamente. A ferramenta o mantém, então verifique se o original tinha um; um SVG só com largura e altura fixas nunca mudou bem de escala.
• Formas minúsculas ficam distorcidas. Ícones muito pequenos desenhados em uma área de trabalho grande podem sofrer com o arredondamento. Isso é raro com a precisão padrão.
• O arquivo é quase todo uma foto incorporada. Exporte a foto como um JPG ou WebP separado e faça um link para ela, ou converta o gráfico inteiro em bitmap.

Perguntas sobre SVG

Páginas relacionadas

Imagens bitmap são tratadas pelo compressor de imagens. Para entender o que roda localmente e por quê, veja como funciona.