Otimizador SVG Online

Otimizador SVG Online — Minificar, Limpar e Comprimir SVG Grátis

Todo SVG exportado do Figma, Adobe Illustrator ou Sketch vem com sobrecarga desnecessária: metadados do editor, declarações de namespace específicas do software, coordenadas decimais verbosas e IDs de camadas que o navegador simplesmente ignora. Este otimizador SVG grátis remove tudo isso, reduzindo o tamanho do arquivo em 30–70% sem alterar um único pixel da saída visual.

Cole o código SVG diretamente ou arraste um arquivo. Escolha o nível de otimização — Safe, Balanced ou Aggressive — e veja as estatísticas antes/depois instantaneamente. Sem upload para servidor, sem cadastro, sem limite de tamanho. Tudo roda no seu browser.

Como Usar o Otimizador SVG

1. Cole ou envie seu SVG — arraste um arquivo .svg para a zona de upload, ou cole o código SVG diretamente na área de texto abaixo.
2. Escolha um nível de otimização — Safe mantém todos os IDs e pula o arredondamento de caminhos; Balanced (recomendado) remove IDs não utilizados e arredonda coordenadas para 2 casas decimais; Aggressive aplica todas as otimizações para redução máxima.
3. Ajuste as opções individuais — ative ou desative Remove Comments, Remove Metadata, Remove Unused IDs e Minify Paths separadamente.
4. Visualize o resultado — troque para a aba "Optimized View" e clique em "Preview" para renderizar o SVG otimizado e verificar que nada mudou visualmente.
5. Exporte ou copie — clique em "Optimize & Copy" para copiar para a área de transferência, ou em "Export .svg" para baixar o arquivo otimizado.

Por que SVGs Exportados de Ferramentas de Design São Tão Grandes

Ferramentas de design são construídas para edição, não para entrega. Quando o Figma exporta um SVG, ele embute:

• Declarações de namespace do editor — xmlns:figma="http://www.figma.com/figma/1.0" e atributos similares que o navegador ignora completamente
• Blocos <metadata> — identificadores de arquivo, strings de versão e informações de prancheta inseridas pelo exportador
• Coordenadas decimais verbosas — dados de caminho como d="M15.123456 32.678901" quando d="M15.12 32.68" renderiza de forma idêntica
• Grupos wrapper vazios — elementos <g> sem atributos úteis, deixados pela lógica de agrupamento de camadas
• Entradas <defs> não utilizadas — clip-paths e gradientes definidos mas nunca referenciados na saída final
• IDs de camada — strings como id="Figma_Layer_234891" que existiam apenas para o editor

Um ícone típico exportado do Figma é 2–5× maior do que o necessário. O otimizador remove toda essa sobrecarga mantendo geometria, cores e estrutura intactos.

Safe vs. Balanced vs. Aggressive — Qual Escolher

Preset Safe — remove comentários, blocos de metadados e atributos de namespace do editor. Mantém todos os IDs intactos (importante se você os referencia de CSS ou JavaScript). Arredonda coordenadas para 3 casas decimais. Redução média: 20–40%.

Preset Balanced (recomendado para a maioria dos SVGs) — tudo do Safe, mais remoção de IDs não utilizados e arredondamento de coordenadas para 2 casas decimais. Seguro para ícones, logos e ilustrações sem dependências CSS externas. Redução média: 40–60%.

Preset Aggressive — tudo do Balanced, mais arredondamento para 1 casa decimal para redução máxima do arquivo. Melhor para ícones simples. Evite para ilustrações complexas com precisão de coordenadas crítica ou animações CSS que referenciam IDs de elementos. Redução média: 50–70%.

Brasileiros que trabalham com ferramentas de build como Vite, webpack ou Rollup geralmente conhecem o SVGO (svg optimizer) — a biblioteca Node.js por trás da maioria dos otimizadores. Esta ferramenta implementa as mesmas otimizações essenciais do SVGO diretamente no browser, sem necessidade de instalação.

Casos de Uso Comuns

• Otimização de performance web: Cada kilobyte economizado em ícones e logos SVG reduz o peso da página e melhora as métricas de Core Web Vitals, especialmente o LCP.
• Limpeza de exportações do Figma e Illustrator: Remova as camadas de metadados proprietárias que ferramentas de design adicionam automaticamente.
• Preparação de componentes React e Vue: Código SVG otimizado e sem IDs desnecessários é mais fácil de colar como componente JSX/TSX — mais curto, mais limpo.
• Manutenção de bibliotecas de ícones: Processe conjuntos inteiros de ícones sem precisar de uma configuração local do SVGO.
• Embedding em e-mail e CMS: SVGs inline menores se encaixam nos limites de tamanho de payload de sistemas de gerenciamento de conteúdo.

Perguntas Frequentes

O que é um otimizador de SVG e o que ele faz exatamente?

Um otimizador SVG remove dados desnecessários de arquivos SVG sem alterar a renderização. Isso inclui metadados do editor, comentários, declarações de namespace XML redundantes, precisão decimal excessiva em coordenadas de caminhos e entradas <defs> não utilizadas. O resultado é um arquivo menor e mais limpo que carrega mais rápido na web.

Por que arquivos SVG exportados do Figma ou Illustrator são tão grandes?

Ferramentas de design adicionam muita sobrecarga às exportações SVG para suportar a reimportação do arquivo no editor. Isso inclui metadados de camadas, declarações de namespace, dicas de histórico de edição e valores de atributo verbosos. Nada disso é necessário para o navegador renderizar a imagem. Um ícone típico exportado do Figma é 2–5× maior do que o mínimo necessário para exibição.

A otimização de SVG é sem perda (lossless)?

Os presets Safe e Balanced são completamente lossless — o SVG renderiza de forma idêntica antes e depois da otimização. O preset Aggressive inclui arredondamento de coordenadas de caminho que é imperceptível visualmente para a maioria das formas, mas pode introduzir diferenças subpixel em curvas complexas. Sempre verifique com a aba Preview antes de publicar.

Devo remover o atributo viewBox durante a otimização?

Não. O atributo viewBox é essencial para a escalabilidade do SVG — ele define o sistema de coordenadas interno e permite que o SVG escale de forma responsiva com CSS. Remover o viewBox força o SVG a renderizar em dimensões de pixel fixas, quebrando layouts responsivos. Este otimizador nunca remove o viewBox, independentemente das configurações escolhidas.

Como reduzir o tamanho do arquivo SVG sem perda de qualidade?

Use o preset Balanced: ele remove metadados do editor, comentários e IDs não utilizados, e arredonda coordenadas de caminho para 2 casas decimais. Essa combinação tipicamente reduz o tamanho do arquivo em 40–60% sem impacto visual. Para redução adicional, ative o modo Aggressive e verifique cuidadosamente a saída no Preview. Se seu SVG possui animações CSS que referenciam IDs de elementos, use o modo Safe para evitar quebrar essas referências.

Como usar um SVG otimizado como componente React inline?

Copie o código SVG otimizado usando "Optimize & Copy", então cole diretamente no return de um componente React. Duas mudanças manuais são necessárias: atributos class viram className, e atributos hifenizados como stroke-width viram camelCase strokeWidth. O otimizador remove a sujeira do editor para que haja menos para adaptar.

Recursos

• Especificação SVG — W3C — O padrão oficial SVG 1.1, cobrindo cada elemento, atributo e comportamento de sistema de coordenadas.
• SVGO no GitHub — A biblioteca Node.js open-source de otimização SVG por trás da maioria dos otimizadores online, com documentação detalhada de plugins.
• MDN: Referência de elementos SVG — Referência completa para cada elemento SVG e quando usá-los ou removê-los.