Neste artigo
O que e otimização SVG?
SVG (Scalable Vector Graphics) e um formato baseado em XML para descrever gráficos vetoriais bidimensionais. Embora os SVGs sejam independentes de resolução e escalem perfeitamente para qualquer tamanho, os ficheiros exportados de ferramentas de design como Figma, Illustrator ou Inkscape frequentemente contem metadados desnecessarios, comentarios, elementos ocultos e marcação verbosa que aumentam significativamente o tamanho do ficheiro sem afetar o resultado visual.
A otimização SVG e o processo de redução do tamanho do ficheiro removendo dados redundantes e simplificando a marcação SVG preservando a fidelidade visual. Um SVG bem otimizado pode ser 30-80% mais pequeno que a sua contraparte não otimizada, resultando em carregamentos de página mais rapidos, menor uso de largura de banda e melhores pontuações Core Web Vitals.
Como funciona a otimização SVG
Os otimizadores SVG modernos como o SVGO analisam a estrutura do documento SVG e aplicam uma serie de transformações para reduzir o tamanho do ficheiro sem alterar o resultado renderizado.
- Remoção de metadados — remove metadados do editor, comentarios XML, elementos ocultos, grupos vazios e definições não utilizadas que as ferramentas de design incorporam mas os navegadores ignoram
- Otimização de caminhos — simplifica os dados de caminho reduzindo a precisão decimal, convertendo coordenadas absolutas em relativas e fundindo segmentos de caminho adjacentes onde possivel
- Limpeza de atributos — remove valores de atributos predefinidos, encurta valores de cor (ex. #ffffff para #fff), consolida transformações redundantes e integra pequenos blocos de estilo
Experimente gratuitamente — sem cadastro
Otimizar o seu SVG →Quando otimizar SVGs
A otimização SVG e valiosa onde quer que gráficos vetoriais sejam usados na web, especialmente quando o desempenho e a velocidade de carregamento importam.
- Desempenho web — SVGs otimizados carregam mais rápido e reduzem o peso total da página, melhorando diretamente o Largest Contentful Paint (LCP) e os Core Web Vitals gerais
- Sistemas de icones — bibliotecas de icones com dezenas ou centenas de SVGs beneficiam enormemente da otimização, pois as poupanças acumuladas em muitos ficheiros pequenos somam-se rapidamente
- Preparacao de animações — marcação SVG limpa e minimal e mais fácil de animar com CSS ou JavaScript e produz animações mais suaves com menos complexidade DOM
Perguntas frequentes
A otimização SVG e com ou sem perdas?
A maioria da otimização SVG e efetivamente sem perdas — o resultado visual permanece identico. Algumas operações como reduzir a precisão decimal nos dados de caminho sao tecnicamente com perdas ao nivel de subpixel, mas a diferença e impercetivel ao olho humano.
Quando não devo otimizar um SVG?
Evite a otimização se o SVG usa funcionalidades que os otimizadores podem modificar incorretamente, como filtros complexos, animações que dependem de IDs de elementos especificos, ou SVGs referenciados por CSS ou JavaScript externo. Compare sempre visualmente o resultado otimizado antes de o usar em produção.
Como o desempenho do SVG se compara ao PNG?
Os SVGs sao tipicamente mais pequenos que os PNGs para gráficos simples como icones, logotipos e ilustrações, especialmente em altas resoluções. Um unico SVG substitui multiplos tamanhos de PNG necessarios para diferentes densidades de ecra. Contudo, para imagens fotograficas complexas ou ilustrações muito detalhadas com milhares de caminhos, formatos rasterizados como WebP ou AVIF podem ser mais eficientes.