Otimizador de SVG (SVGO)
Otimize e minifique código SVG com SVGO no navegador. Remove metadados de editores, comentários e marcação redundante e mostra a economia com uma prévia.
Usa o preset padrão do SVGO, que mantém o viewBox, os títulos e as descrições de acessibilidade.
Executa totalmente no seu navegador. Seus dados nunca são enviados.
O que é Otimizador de SVG?
O Otimizador de SVG executa o SVGO, a biblioteca padrão de otimização de SVG, sobre o seu código. Ele remove metadados de editores, comentários e elementos ocultos e vazios, encurta dados de caminhos, números e cores e mescla o que pode ser mesclado. Você recebe o código otimizado, uma prévia de antes/depois e a redução de tamanho.
Como usar Otimizador de SVG
- Cole o código SVG em Código SVG, ou solte/escolha um arquivo
.svg. - Ajuste as opções: Várias passagens, Precisão numérica, Manter IDs, Trocar width/height por viewBox, Formatar a saída.
- Compare as prévias de antes/depois e o selo de tamanho.
- Copie o SVG otimizado ou baixe-o como
name-min.svg.
Exemplo
100×100 SVG from an editor with an XML declaration, a comment, <metadata>, empty <defs> and a nested <g> around a rect (474 bytes)
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10 10h80v80H10z" style="fill:red;stroke:none"/></svg>
Quando usar Otimizador de SVG
Use-o em ícones, logos e ilustrações exportados do Figma, Illustrator, Inkscape ou Sketch antes de publicá-los em um site ou app. Ative Manter IDs se CSS, JavaScript ou referências <use> em outro lugar dependerem dos IDs dos elementos. Sempre confira a prévia: SVGs incomuns com scripts ou referências externas podem precisar de ajustes manuais.
Como funciona Otimizador de SVG
A ferramenta carrega sob demanda a versão para navegador do SVGO 4 e aplica os plugins do preset-default: remove a declaração XML, o doctype, comentários, metadados e namespaces de editores, limpa atributos e valores numéricos, converte formas em caminhos, recolhe grupos, reescreve dados de caminhos e transformações, entre outros. O preset padrão do SVGO 4 mantém o viewBox, o <title> e o <desc> que não vem de editor, então a escala e a acessibilidade são preservadas. Com várias passagens, os plugins se repetem até a saída parar de diminuir.
Casos de Uso Comuns
- Reduzir ícones exportados de ferramentas de design antes de adicioná-los a uma biblioteca de componentes.
- Limpar um logo SVG para que possa ser embutido no HTML.
- Diminuir sprites SVG para carregar páginas mais rápido.
- Remover metadados de editores que vazam caminhos de arquivos ou nomes de autores.
Nota de Segurança
As imagens são decodificadas, processadas e codificadas localmente no seu navegador com a Canvas API. Nada é enviado a um servidor.
Perguntas Frequentes
A otimização do SVGO é sem perdas?
Com o preset padrão, ela é visualmente sem perdas em quase todos os casos. Reduzir demais a precisão numérica (0–1 casa decimal) pode deslocar formas pequenas, então compare as prévias.
Por que meu CSS parou de funcionar depois de otimizar?
O SVGO encurta ou remove IDs não usados. Ative Manter IDs se seus estilos ou scripts os usam.
Ele remove o viewBox?
Não. O preset padrão do SVGO 4 mantém o viewBox. A opção Trocar width/height por viewBox remove o tamanho fixo, deixando o SVG responsivo.