Otimizador de SVG

Como funciona

1. Cole ou importe um SVG : insira a marcação SVG diretamente ou importe um arquivo .svg exportado do Illustrator, Figma ou Sketch.
2. Configure as passagens de otimização : escolha quais otimizações aplicar, remoção de comentários, remoção de metadados, simplificação de caminhos e normalização do viewBox.
3. Otimize : a ferramenta executa as passagens escolhidas e exibe o percentual de redução de tamanho.
4. Baixe ou copie : salve o SVG otimizado ou copie a marcação para colar no seu código.

Por que otimizar seus SVGs ?

Os arquivos SVG exportados de ferramentas de design estão cheios de dados desnecessários, metadados de editor, declarações de estilo inline com valores padrão, grupos vazios, atributos de transform redundantes e comentários. Esse excesso aumenta o tamanho sem mudar a renderização. O SVGO (otimizador SVG padrão da indústria usado aqui) geralmente reduz o tamanho em 50 a 80 % preservando uma renderização idêntica ao pixel. SVGs menores carregam mais rápido, incorporam-se mais rapidamente em HTML e reduzem a largura de banda, particularmente importante para sistemas de ícones que carregam dezenas de SVGs por página.

Otimizações aplicadas

• Comentários removidos: comentários de gerador e de editor removidos
• Metadados removidos: elementos title, desc e XMP
• Grupos vazios mesclados: elementos <g> de envelope desnecessários removidos
• Caminhos simplificados: comandos de caminho redundantes mesclados e encurtados
• Atributos limpos: valores padrão e atributos de apresentação removidos
• ViewBox normalizado: sistema de coordenadas coerente

Breve história de SVG e SVGO

Scalable Vector Graphics nasceu de uma competição entre duas propostas do W3C: Precision Graphics Markup Language (PGML) da Adobe, IBM, Netscape e Sun, e Vector Markup Language (VML) da Microsoft. Ambos foram submetidos em 1998; o compromisso do W3C tornou-se SVG, recomendado como SVG 1.0 em setembro de 2001. O Internet Explorer notoriamente recusou enviar suporte SVG até IE9 (2011), enquanto Firefox, Safari e Opera o suportaram desde meados dos anos 2000. SVG 1.1 apareceu em 2003, com uma Segunda Edição em 2011. SVG Tiny 1.2 visou dispositivos móveis em 2008. SVG 2 começou a ser elaborado por volta de 2016 mas estagnou; hoje permanece um Candidate Recommendation Draft (última modificação em 2018), com navegadores entregando peças individualmente. A otimização chegou mais tarde. SVGO foi criado por Kir Belevich (svg-go) e publicado pela primeira vez no GitHub em outubro de 2012, escrito em JavaScript. Tornou-se o padrão de facto, integrado em webpack-loader, Vite, Sketch, plugins de exportação Figma, e a interface web SVGOMG de Jake Archibald (equipe Chrome) lançada em 2015. SVGO 3 (lançado em 2023) modernizou a base de código. Esta ferramenta implementa um subconjunto seguro dos plugins mais impactantes do SVGO, executando inteiramente no seu navegador.

O que um otimizador SVG realmente faz

• Redução de precisão decimal. Illustrator exporta caminhos com 6 dígitos decimais como M127.348293. Três decimais são visualmente idênticos para tamanhos típicos de ícones; um ou dois costumam bastar. SVGO usa 3 decimais por padrão via o plugin cleanupNumericValues. Precisão menor = arquivo menor.
• Recolher grupos inúteis. Ferramentas de design envolvem cada operação em elementos <g>; muitos ficam vazios após simplificação. O plugin collapseGroups mescla grupos com um único filho em seu pai.
• Remover metadados. Illustrator carimba cada exportação com blocos <metadata>...</metadata> contendo pacotes XMP, Inkscape com atributos de namespace sodipodi, Figma com IDs de editor. Nada disso afeta a renderização. removeMetadata, removeEditorsNSData e removeXMLProcInst tratam disso.
• Otimização de comandos de caminho. Converter coordenadas absolutas em relativas (frequentemente mais curtas), mesclar segmentos de linha consecutivos (l 5,0 l 0,5 permanece dois; L 5,0 L 5,5 torna-se v 5), remover Z inúteis após z. O plugin convertPathData pode economizar 30-50 % em strings de caminho.
• Remoção de atributos padrão. fill="black", stroke="none", stroke-width="1" são padrões; SVGO os remove. Combinado com mergeStyles, isso muitas vezes corta exportações com estilos inline pela metade.
• Encurtamento de cores. #ffffff → #fff; rgb(255,255,255) → #fff; cores nomeadas (aliceblue) → hex se for mais curto. O plugin convertColors.
• Remoção de IDs não usados. IDs gerados pelo editor como id="path-7423" geralmente nunca são referenciados. O cleanupIds do SVGO remove IDs órfãos e minifica o resto para a, b, c...

Onde a otimização SVG importa

• Sistemas de ícones. Uma página com 30 ícones SVG de 2 KB cada é 60 KB; otimizados para 800 bytes cada economiza 36 KB. Heroicons, Lucide, Phosphor, Feather todos enviam SVGs pré-otimizados; se você os extraiu de um arquivo de design, precisa fazer isso você mesmo.
• Logos e ativos de marca. Logos enviados aos clientes são frequentemente 50-100 KB do Illustrator; otimizados são 5-10 KB. Mesma fidelidade visual, menor banda, carregamento de página mais rápido. O SVG do logo da Wikipedia caiu de 39 KB para 11 KB após uma única passagem de otimização.
• SVG inline em HTML. Quando você coloca SVG inline (sem requisição HTTP extra), cada byte do SVG infla o payload HTML que bloqueia o parser do navegador. Um ícone de 200 bytes vs 2 KB importa para o tempo de primeira pintura.
• Visualização de dados. D3.js, Observable, saída SVG do ECharts e React-vis produzem SVGs grandes com milhares de elementos. Um gráfico de dispersão com 5.000 pontos é facilmente 500 KB bruto; otimizado pode cair para 150 KB permanecendo idêntico.
• Geração de fontes de ícones. Ferramentas como IcoMoon, Fontello e Fontastic convertem SVGs para fontes de ícones. Pré-otimizar os SVGs fonte garante saída de fonte mais limpa e arquivos de fonte menores.
• Ativos de impressão e PDF. Embutir SVG em PDF (via ferramentas web-to-PDF como Puppeteer, wkhtmltopdf) significa que o bloat SVG acaba no PDF final. Otimize primeiro.
• SVG seguro para email. Muitos clientes de email (Outlook, alguns apps Gmail) não renderizam SVG; para os que renderizam (Apple Mail, Gmail web), um SVG inline menor mantém emails sob o limite de corte do Gmail de 102 KB.

Erros de otimização que quebram SVGs

• Remover IDs que são referenciados. SVGs frequentemente usam <defs> com IDs referenciados via url(#gradient-1) em fill ou stroke. Remoção agressiva de IDs quebra gradientes, máscaras, clip paths, filtros. Use uma ferramenta que rastreie referências, não regex cego.
• Remover atributos width/height cegamente. Cai a proporção natural. O resultado: <img src="icon.svg"> estica para preencher seu contêiner sem tamanho intrínseco, causando CLS (Cumulative Layout Shift). Mantenha pelo menos viewBox; preferencialmente mantenha width/height também.
• Redução decimal excessivamente agressiva. Reduzir para 0 decimais em ícones pequenos faz os caminhos visivelmente irregulares. 3 decimais é um padrão seguro; vá para 1 apenas para ícones maiores que 64×64 ou onde perfeição em pixels não é requerida.
• Remover xmlns ao colocar inline. Arquivos SVG independentes precisam de xmlns="http://www.w3.org/2000/svg". SVG inline em HTML não precisa (o parser HTML5 lida com isso), mas se você pode extrair o SVG para um arquivo depois, mantenha o xmlns. Confusão aqui quebra a renderização SVG do Safari.
• Substituir currentColor por fill codificado. fill="currentColor" é um poderoso hook CSS: o ícone herda a cor do texto. Otimizadores agressivos o substituem pelo valor computado, quebrando modo escuro e sistemas de ícones com temas.
• Mesclar caminhos que deveriam ficar separados. Algumas animações apontam para IDs de caminhos específicos; algumas ferramentas de acessibilidade dependem de múltiplos elementos <path> com texto <title> individual. O plugin mergePaths destrói esses. Desative-o para SVGs animados ou acessíveis.
• Remover <title> e <desc> acessíveis. SVGs usados como imagens independentes ou em tags <img> precisam de <title> para leitores de tela (similar ao texto alt). Remoção agressiva de metadados retira isso. Ou mantenha os títulos, ou adicione aria-label no elemento SVG inline.

Mais perguntas frequentes

Quanto a otimização SVG pode realmente economizar?

Depende muito da fonte. Exportações do Adobe Illustrator geralmente encolhem em 60-80 % na primeira passagem, principalmente por remoção de metadados, namespaces de editor e redução de precisão decimal. Exportações do Figma são mais limpas de fábrica (tipicamente 20-40 % de economia). SVG escrito à mão por um desenvolvedor? Geralmente 5-15 %, já que não há muito a remover. O logo da Wikipedia, caso extremo de bloat Illustrator, foi de 39 KB para 11 KB. Um ícone típico 24×24 do Figma cai de 1,4 KB para 0,6 KB.

Quando devo colocar SVG inline vs usá-lo como arquivo externo?

Inline (<svg>...</svg> em HTML) para ícones pequenos (abaixo de 2 KB), conteúdo crítico acima da dobra, e em qualquer lugar onde você precisa de CSS para estilizar o SVG (ex.: currentColor, estados hover, modo escuro). Arquivo externo (<img src="icon.svg"> ou CSS background-image) para ícones idênticos usados repetidamente (o navegador faz cache), ilustrações maiores, conteúdo que não precisa de temática CSS. Sprite SVG (arquivo único com múltiplos elementos <symbol>, referenciados por <use>) foi o padrão de sistema de ícones de 2014-2019, agora largamente superado por componentes inline-svg em React/Vue/Svelte.

Há riscos de segurança em SVGs não otimizados?

Sim. SVG pode embutir tags <script> e manipuladores de evento onload, onclick; SVGs enviados por usuários são um vetor XSS. SVG pode referenciar recursos externos via <image href="...">, vazando o IP do espectador. Fontes SVG (depreciadas mas ainda parseáveis) historicamente tinham buffer overflows. Um bom otimizador remove <script> e manipuladores de evento como parte da limpeza; se você aceita uploads SVG de usuários, passe-os por um sanitizador endurecido (DOMPurify com perfil SVG) antes de servir.

Posso otimizar SVG usando a linha de comando?

Sim. npx svgo input.svg -o output.svg usa a biblioteca canônica SVGO. Configure plugins via svgo.config.js. Integrações CI: imagemin-svgo no webpack, vite-plugin-svgo, GitHub Action antfu/svg-opt. Para otimização em lote: svgo -f ./icons -o ./icons-optimised. A ferramenta de navegador aqui é mais rápida para casos pontuais e funciona sem Node instalado.

Meu SVG é enviado para um servidor quando otimizo aqui?

Não. A otimização roda inteiramente no seu navegador via JavaScript sobre o markup SVG que você cola. Abra a aba Network no DevTools enquanto otimiza; verá zero requisições saintes. Seguro para logos proprietários, designs de ícones não lançados, SVGs corporativos internos, e qualquer coisa sob NDA.

Ferramentas relacionadas