SVG Optimizer — Otimizador de SVG

Por que otimizar arquivos SVG

Arquivos SVG exportados de ferramentas de design como Illustrator, Figma, Sketch ou Inkscape contêm muito mais do que as formas que você vê. Metadados do editor, comentários XML, camadas ocultas, valores padrão de atributos, definições não utilizadas, casas decimais em excesso e grupos redundantes podem facilmente ocupar metade do arquivo. Esta ferramenta executa o SVGO — o mesmo otimizador usado pela maioria dos pipelines de build e bibliotecas de ícones — para eliminar esse excesso. SVGs menores carregam mais rápido, deixam os ícones inline do seu HTML mais leves e mantêm os repositórios organizados.

O preset padrão aplica dezenas de transformações seguras: remove a declaração XML, os comentários, os metadados e os namespaces dos editores, limpa os IDs, encurta as cores, mescla caminhos, converte formas básicas em caminhos compactos quando isso é mais curto e reescreve os dados dos caminhos com comandos relativos e menos dígitos. Multipass repete o processo até não encontrar mais economia, o que muitas vezes rende alguns pontos percentuais a mais.

Como escolher as opções

Precision (precisão) controla quantas casas decimais são mantidas nos números; 2–3 atende bem a ícones, enquanto ilustrações detalhadas ou mapas podem precisar de mais. Remove <title> economiza bytes, mas remove o nome acessível, então mantenha-o em gráficos com significado. Remove viewBox normalmente deve ficar desativada, pois é o viewBox que permite que um SVG seja dimensionado de forma responsiva. Remove width/height é útil quando o tamanho é controlado pelo CSS. Remove scripts & event handlers remove elementos <script>, atributos on* e links javascript:, um bom hábito para SVGs de origem desconhecida. Pretty print indenta o resultado para facilitar a leitura, ao custo de alguns bytes.

Prévias privadas, locais e seguras

Todo o processamento acontece no seu navegador; nenhum arquivo é enviado. As duas prévias são exibidas por meio de um elemento de imagem que carrega uma URL blob local, e os navegadores nunca executam scripts dentro de SVGs exibidos dessa forma. Sempre compare as duas prévias antes de usar o resultado: uma precisão agressiva demais ou a remoção do viewBox pode mudar a forma como um gráfico é renderizado. Os indicadores de tamanho mostram os bytes economizados para que você possa equilibrar o tamanho do arquivo e a fidelidade visual.