Como otimizar um SVG e reduzir o tamanho do arquivo

Resumo: abra o Otimizador de SVG do Imgovo, adicione seu SVG (até 3 MB), mantenha ativada a opção Remover comentários e dados de editor, arredonde os números se quiser e compare a pré-visualização com o original. Depois baixe o SVG ou copie o código. O arquivo é processado no seu navegador e nunca é enviado.

Por que os arquivos SVG engordam

Um logotipo simples tem poucas linhas de código. Mas programas de desenho como Inkscape, Sketch ou Illustrator costumam acrescentar muito mais: comentários, configurações do editor, grupos vazios, atributos vazios, espaços generosos e coordenadas com muitas casas decimais. Nada disso muda o que você vê, mas tudo precisa ser baixado. Em um site com muitos ícones, isso soma. Arquivos menores também ajudam as páginas a carregar mais rápido; para o quadro geral, leia Como otimizar as imagens do seu site: tamanho, formato e qualidade.

O que o otimizador faz

• Remove comentários e dados do editor.
• Remove grupos vazios e atributos vazios.
• Remove espaços desnecessários.
• Pode arredondar números longos para 3, 2 ou 1 casa decimal, ou mantê-los como estão.
• Pode manter o título e a descrição, que os leitores de tela usam.
• Mantém o viewBox, as formas, os gradientes, os caminhos de recorte, as máscaras e os ids que outras partes do arquivo usam.

Passo a passo

1. Abra o Otimizador de SVG e solte um arquivo SVG na página, clique para escolhê-lo ou cole.
2. Em Precisão dos números, escolha Manter os números como estão, 3 casas decimais, 2 casas decimais ou 1 casa decimal.
3. Deixe Remover comentários e dados de editor ativado. Marque Manter título e descrição se o desenho for conteúdo que os leitores de tela devem anunciar.
4. Veja a seção Resultado. Ela mostra o tamanho antes e depois e desenha o original e o resultado lado a lado.
5. Leia a linha de comparação. O Imgovo desenha os dois no mesmo tamanho e informa o quanto diferem, pixel a pixel.
6. Clique em Baixar SVG, ou em Copiar o código SVG para colar na sua página.

Vale a pena arredondar os números?

Comece sem arredondar: o desenho continua igual e os dados do editor ainda são removidos. Depois tente 3 casas decimais e, se a pré-visualização continuar boa, 2. Arredondar economiza mais espaço, mas pode alterar um pouco linhas finas ou detalhes minúsculos. Se o Imgovo indicar uma diferença visível, volte para uma precisão maior.

Troque as cores sem abrir um editor

O Imgovo lista as cores sólidas escritas diretamente nas formas e nos estilos. Escolha uma cor nova para qualquer uma delas e cada uso dessa cor exata é substituído. É prático para ter um mesmo ícone em várias cores da marca.

Gradientes, cores definidas por folhas de estilo e a palavra currentColor não são alterados. A comparação pixel a pixel é dispensada quando você troca cores, porque o resultado deve mesmo ser diferente.

Texto em um SVG

O texto é desenhado com uma fonte. Se o dispositivo de quem abre o arquivo não a tiver, outra é usada e o desenho muda. O Imgovo mostra um aviso quando o arquivo contém texto. Converter o texto em contornos no seu programa de desenho evita o problema.

O que é removido por segurança

Um SVG pode conter scripts, páginas da web incorporadas, animações que podem mudar links, links para outros sites e manipuladores de eventos. O Imgovo remove esses itens, e um aviso abaixo do arquivo diz quantos foram retirados. Essa é uma etapa separada de reduzir o tamanho do arquivo.

Depois de otimizar

• Para transformar o SVG em uma imagem de pixels, use o Conversor de SVG.
• Para usá-lo como ícone de site, adicione-o ao Gerador de favicon, que pode incluir um favicon.svg.
• Guarde sempre o arquivo original. Os dados do editor não podem ser recuperados da cópia otimizada.

Privacidade

O SVG é lido e reescrito no seu navegador. Nada é enviado.

Experimente agora

Abra o Otimizador de SVG, adicione um SVG exportado do seu programa de desenho e veja o quanto ele diminui.