Como usar: Otimizador SVG
- Cole o código SVG ou abra um arquivo
.svg. - Mantenha as configurações padrão para a maior economia ou diminua a precisão para deixar os paths ainda menores.
- Compare as pré-visualizações original e otimizada para garantir que nada saiu do lugar.
- Copie o código otimizado ou baixe o
.svg.
Por que otimizar arquivos SVG?
SVGs exportados de ferramentas de design trazem muito peso extra: metadados do editor, comentários, camadas ocultas, valores padrão de atributos, grupos vazios e coordenadas com seis casas decimais. Nada disso afeta a aparência da imagem, mas pode deixar o arquivo de duas a cinco vezes maior do que o necessário. Ícones SVG inseridos direto na página repetem esse excesso em cada página.
O que o SVGO faz
SVGO é o otimizador de SVG padrão usado pela maioria das ferramentas de build. Ele executa um conjunto de plugins seguros:
- Remove a declaração XML, comentários,
<metadata>, namespaces de editores (Illustrator, Inkscape, Sketch) e elementos ocultos. - Elimina grupos inúteis, junta paths quando possível e converte formas em dados de path mais curtos.
- Arredonda números para a precisão escolhida e reescreve os comandos de path na forma mais curta.
- Minifica estilos inline e cores (
#FFFFFF→#fff) e remove valores padrão. - Encurta IDs e remove os que nada referencia.
Esta ferramenta sempre mantém o viewBox, necessário para que os SVGs escalem corretamente.
Escolhendo a precisão
| Precisão | Ideal para |
|---|---|
| 1 | Ícones simples desenhados em grade de pixels |
| 2–3 | a maioria dos ícones, logos e ilustrações (padrão 3) |
| 4–5 | Ilustrações detalhadas, mapas e gráficos com curvas finas |
Precisão menor significa menos dígitos e arquivos menores, mas as curvas podem se deslocar um pouco. É para isso que serve a pré-visualização.
Largura, altura e viewBox
Remover width e height permite que o SVG se ajuste ao contêiner com CSS, o que geralmente é o desejado para ícones e SVG inline. Mantenha-os quando o SVG for usado em uma <img> sem dimensões explícitas.
Próximos passos: transforme o SVG otimizado em um background CSS, em um componente React ou em um elemento do Webflow.
Também pesquisado como: otimizar svg online, comprimir svg, minificar svg, minificador svg, svgo online, reduzir tamanho svg, compressor svg.
Ferramentas que combinam com: Otimizador SVG
- Escalar SVG ViewBox — Normalize ícones para um novo viewBox (por exemplo, 24×24) reescalando as coordenadas reais dentro de cada path, circle, rect e polygon, sem gambiarras com transform="scale()".
- Compressor de imagens — Reduz o tamanho das fotos e dos gráficos em 50–90% sem perda visível de qualidade.
- Compactar e Descompactar Gzip — Compacte texto ou qualquer arquivo com gzip, zlib ou deflate bruto, ou cole Base64 / abra um arquivo .gz para descompactar.
- Compressor Brotli — Comprima texto ou arquivos com Brotli em qualquer qualidade de 0 a 11, descomprima dados .br e compare o resultado com o gzip — tudo localmente no seu navegador.