Arquivos SVG menores que ficam exatamente iguais
SVGs exportados do Illustrator, Figma, Inkscape ou Sketch carregam muito peso que o navegador nunca desenha: metadados do editor, comentários, camadas ocultas, números com oito casas decimais, grupos dentro de grupos. Este otimizador roda o SVGO — a ferramenta padrão de otimização de SVG — no seu navegador para remover tudo isso, e mostra o resultado ao lado do original para você ver que nada mudou além do tamanho.
Como otimizar um SVG
- 1Solte um ou mais arquivos SVG, escolha-os ou cole código SVG.
- 2Confira a prévia de antes e depois e o tamanho economizado em cada arquivo.
- 3Diminua a Precisão para arquivos menores; aumente se as curvas começarem a ficar erradas.
- 4Ative ou desative plugins do SVGO individualmente — por exemplo, remova width e height para o SVG escalar com CSS.
- 5Baixe o SVG otimizado, copie o código ou baixe todos os arquivos de uma vez em um ZIP.
O que é removido
- Dados do editor
- Metadados, comentários, a declaração XML e o doctype, e os namespaces e atributos que o Inkscape, o Illustrator e o Sketch adicionam para uso próprio.
- Código redundante
- Grupos e atributos vazios, valores padrão, elementos ocultos, definições e IDs não usados, e grupos que envolvem um único elemento.
- Geometria prolixa
- Os dados de caminho são reescritos com comandos relativos e menos dígitos, formas viram caminhos mais curtos e transformações são incorporadas às coordenadas quando possível.
Padrões seguros, opções mais fortes
O conjunto padrão é o próprio preset do SVGO, escolhido para não alterar a imagem. As opções extras vão além, mas mudam mais do que o tamanho: remover width e height faz o SVG preencher o contêiner, remover o título esconde o nome dele dos leitores de tela, e remover xmlns só serve para SVG colado inline no HTML.
Para transformar primeiro um bitmap em SVG, use o conversor de imagens, que pode enviar o SVG direto para cá; para incorporar o resultado, use imagem para Base64.
Perguntas frequentes
- É a mesma coisa que o SVGO ou o SVGOMG?
- Ele roda o próprio SVGO, o mesmo motor que o SVGOMG usa, com o preset padrão e os mesmos plugins como chaves. Tudo roda no seu navegador.
- Otimizar vai mudar a aparência do meu SVG?
- Não com as configurações padrão. Uma precisão muito baixa pode entortar curvas finas, e algumas opções extras mudam o dimensionamento ou a acessibilidade — a prévia de antes e depois mostra a diferença na hora.
- Posso otimizar vários arquivos SVG de uma vez?
- Sim. Solte quantos quiser, ajuste as configurações uma vez para todos e baixe tudo junto em um ZIP.
- Por que o tamanho com gzip é exibido?
- Servidores web geralmente enviam SVG comprimido com gzip, então esse valor fica mais próximo do que os visitantes realmente baixam.
- Meus arquivos são enviados para algum servidor?
- Não. O SVGO roda no seu navegador e os arquivos nunca saem do seu dispositivo.