Otimizar SVG

Por que otimizar um SVG

Um SVG é um arquivo de texto (XML) que descreve formas, não pixels. Isso o torna perfeito para logotipos, ícones e ilustrações: fica nítido em qualquer tamanho e costuma pesar muito pouco. Mas os programas de design adicionam ao exportar muitas informações que não servem para nada na web:

• Metadados do editor: nome do programa, versão, camadas, guias, namespaces próprios (sodipodi:, inkscape:, sketch:…).
• Coordenadas com casas decimais demais, como M12.000001 4.9999998, quando duas bastam.
• Grupos vazios ou redundantes, transformações que podem ser aplicadas direto às formas, estilos repetidos.
• Comentários, títulos de camadas e IDs gerados automaticamente.

Tudo isso multiplica o tamanho do arquivo. Em um ícone não parece muito, mas um sistema de ícones com dezenas de SVGs inline, ou um logotipo complexo no cabeçalho de cada página, soma kilobytes baixados a cada visita.

Como otimizar seus SVG

1. Solte um ou vários arquivos .svg, ou cole diretamente o código SVG na caixa de texto (ou com Ctrl+V em qualquer lugar da página).
2. O ImageZap os otimiza na hora com o SVGO e mostra o tamanho antes e depois, o tamanho comprimido com gzip e uma pré-visualização dos dois para conferir que estão iguais.
3. Ajuste as opções se necessário: as mudanças são aplicadas a todos os arquivos no mesmo instante.
4. Baixe cada SVG, todos em um ZIP, ou copie o código ou um data URI para usar em CSS.

O que o SVGO faz

O SVGO (SVG Optimizer) é a ferramenta de referência para otimizar SVG, usada pela maioria das ferramentas de build e frameworks. O ImageZap roda a versão para navegador com o preset padrão, que aplica dezenas de transformações seguras, entre elas:

• Remover metadados, comentários, elementos ocultos e atributos padrão.
• Arredondar coordenadas para a precisão escolhida.
• Converter formas básicas em caminhos mais curtos e mesclar caminhos quando possível.
• Simplificar cores (#ffffff → #fff) e mover estilos para atributos.
• Colapsar grupos desnecessários e remover IDs não usados.

O que nunca é removido é o viewBox: é ele que permite que o SVG escale corretamente, e removê-lo é a causa mais comum de ícones que aparecem cortados depois de otimizados.

Opções

• Várias passadas: repete a otimização até não haver mais melhorias. Costuma economizar um pouco mais, sem risco.
• Casas decimais nas coordenadas: é o ajuste que mais influencia o tamanho. Para ícones de 16-48 px, 1 casa decimal basta; para ilustrações grandes ou detalhadas, 2-3. Se notar curvas deformadas, aumente.
• Remover width/height: deixa só o viewBox, de modo que o SVG se adapta ao tamanho que você der pelo CSS. Útil para ícones inline; não use se o SVG precisar ter um tamanho fixo quando aberto sozinho.
• Manter IDs: ative se o seu CSS, JavaScript ou animações fazem referência a elementos pelo id.

SVG inline, como arquivo ou como data URI

• Como arquivo (<img src="logo.svg">): fica em cache e pode ser reutilizado. O mais simples para logotipos e ilustrações. Lembre-se de incluir width e height no <img> para evitar saltos de layout.
• Inline (colar o <svg> no HTML): permite mudar cores com CSS (fill: currentColor) e não adiciona requisições. Ideal para ícones de interface.
• Como data URI em CSS: útil para fundos, marcadores ou pequenos detalhes decorativos. O botão Copiar data URI gera uma versão codificada para URL, mais curta que base64.

Se o SVG também for seu favicon, você pode gerar todos os formatos com o gerador de favicons.

Perguntas frequentes

A aparência do meu SVG vai mudar?

Não deveria: o SVGO só aplica transformações que preservam o resultado visual. Compare sempre as duas pré-visualizações; se notar diferenças, aumente a precisão decimal ou ative Manter IDs.

Quanto dá para reduzir?

Depende da origem. Os SVG exportados do Illustrator ou do Inkscape costumam cair 50-80%; os do Figma, que já são bem limpos, 20-40%.

É seguro abrir SVG de terceiros aqui?

Sim. As pré-visualizações são exibidas como imagens, um modo em que o navegador não executa scripts incorporados. Além disso, nada sai do seu dispositivo.

Por que mostrar o tamanho com gzip?

Porque os servidores web comprimem os SVG ao enviá-los. O tamanho em gzip é uma estimativa do que realmente é baixado.