Como usar Otimizador de SVG
- 1
Cole o SVG
Insira o código do arquivo, normalmente exportado de um editor gráfico.
- 2
Otimize
Metadados e precisão desnecessária são removidos.
- 3
Confira o desenho
Compare o resultado com o original antes de usar.
Sobre a ferramenta
SVG exportado de editores gráficos vem cheio de coisas que o navegador ignora: identificadores de camada, metadados do programa, comentários e coordenadas com dez casas decimais. Não é raro esse excesso responder pela maior parte do arquivo.
A otimização remove o que não afeta o desenho e arredonda a precisão para um nível suficiente. Reduções de 50% a 80% são comuns em ícones exportados do Illustrator ou do Figma.
Por ser vetorial, o SVG continua nítido em qualquer tamanho e pode ser colorido por CSS — vantagens que se perdem ao converter para PNG. Para ícones e logotipos, é quase sempre o formato certo.
Quando usar
- Reduzir o peso de ícones antes de publicar
- Limpar SVG exportado do Figma ou do Illustrator
- Preparar logotipos para embutir direto no HTML
- Diminuir o tamanho de ilustrações vetoriais
- Remover metadados desnecessários de arquivos de terceiros
Perguntas frequentes
A otimização estraga o desenho?
Não deve. Ainda assim, compare o resultado com o original — ilustrações muito detalhadas podem sofrer com o arredondamento de precisão.
Quanto de redução esperar?
Entre 50% e 80% em arquivos exportados de editores gráficos, que costumam trazer bastante metadado.
SVG ou PNG para ícones?
SVG, na maioria dos casos: fica nítido em qualquer resolução, costuma pesar menos e pode ser colorido por CSS.