Como reduzir o tamanho de um SVG sem quebrar o arquivo

Um SVG exportado de uma ferramenta de design é, em boa parte, texto que o navegador descarta: metadados do editor, comentários e coordenadas escritas com seis casas decimais. Remover isso é seguro. O problema é que duas das configurações que mais encolhem um arquivo também o quebram, e a contagem de bytes não diz qual das duas coisas aconteceu.

Otimize um SVG com a ferramenta

1. Abra o SVG optimiser. Cole o seu código na caixa chamada SVG markup (código SVG), pressione Open SVG files (abrir arquivos SVG), embaixo dela, ou solte arquivos SVG em qualquer lugar da página; vários arquivos são otimizados juntos, cada um no seu cartão. A caixa começa com um pequeno ícone de exemplo, e a linha de contagem dela diz quantos caracteres e linhas ela tem.
2. Não há botão para pressionar: cada arquivo é otimizado de novo toda vez que você muda o texto dele ou uma configuração. Leia os números em Result (resultado): Before (antes), After (depois), Saved (economia) e Gzipped (com gzip, antes → depois, “which is what ships”, o que vai para o ar). O cartão de cada arquivo mostra o próprio antes e depois.
3. Mova Coordinate precision (precisão das coordenadas). Ela vai de 0 a 6 casas decimais e começa em 3. Abaixo de 2, aparece um aviso embaixo do controle.
4. Deixe Run repeatedly until it stops shrinking (repetir até parar de encolher) marcado. Ele vem ativado por padrão e repete a otimização até que uma passada não economize mais nada.
5. Abra More options (mais opções) para ver Options that can break the file (opções que podem quebrar o arquivo): Remove viewBox, Remove <title> e Shorten and drop unused ids. Todas vêm desmarcadas, e cada uma diz, embaixo do nome, o que custa. A linha embaixo de More options diz quais estão ligadas, e Result as nomeia mesmo com o grupo fechado.
6. Compare as duas prévias renderizadas, chamadas Original e Optimised. Se forem diferentes, foi a última configuração que você mudou.
7. Pressione Download optimised SVG (ou a tecla D) para salvar o resultado, como optimised.svg para código colado ou logo-optimised.svg para um arquivo chamado logo.svg, ou Copy SVG code (copiar o código SVG, ou a tecla C). Com vários arquivos, All 3 as .zip salva todos juntos.

O que cada configuração remove, e o que pode quebrar

Configuração	Estado inicial	O que economiza	O que pode quebrar
Comentários, metadados do editor, definições não usadas	Sempre ativo	Os bytes fáceis de qualquer exportação de ferramenta de design	Nada que você consiga ver
Coordinate precision	3 casas decimais	A maior parte da economia numa exportação típica	As curvas, abaixo de 2 casas
Run repeatedly	Ativo	O que uma única passada deixou para trás	Nada
Remove viewBox	Desmarcado	Pouquíssimos bytes	O redimensionamento
Remove <title>	Desmarcado	O texto do título	O nome acessível
Shorten and drop unused ids	Desmarcado	As strings de id	CSS externo, scripts e referências <use> vindas de outros documentos

A precisão é onde estão os bytes

Precisão das coordenadas é o número de casas decimais mantidas em cada número do arquivo. Ferramentas de design costumam escrever seis ou mais, e nenhuma tela consegue mostrar a diferença.

O próprio exemplo da ferramenta mostra a escala disso. O sinal de visto dele é desenhado por este path:

M 16.000000 24.000000 L 22.000000 30.000000 L 32.000000 14.000000

Essa string tem 65 caracteres. Cada uma das seis coordenadas traz um ponto decimal e seis zeros, então 6 × 7 = 42 desses 65 caracteres não dizem absolutamente nada. Quando os dígitos finais não são zeros, num ícone desenhado no tamanho pretendido eles ainda descrevem uma diferença muito menor que um pixel, e é isso que o controle corta: três casas é o ponto de partida, duas costumam bastar para um ícone, e abaixo de duas as curvas se deformam visivelmente. A prévia lado a lado existe para você ver isso acontecer em vez de confiar numa porcentagem.

As duas configurações que quebram arquivos

viewBox é o atributo que mapeia as coordenadas internas de um desenho para a caixa em que o SVG for desenhado. É ele que permite que um mesmo arquivo seja exibido em qualquer tamanho. Remova-o e o SVG fica preso aos atributos width e height: não preenche um contêiner nem responde ao dimensionamento por CSS. Essa é a forma mais comum de um ícone otimizado acabar no tamanho errado em produção, e a configuração economiza pouquíssimos bytes em troca.

O elemento <title> é como um leitor de tela dá nome a um SVG. Remova-o e um gráfico informativo é anunciado como nada. Só é seguro removê-lo de um ícone puramente decorativo que já esteja escondido das tecnologias assistivas com aria-hidden.

O SVGO, o motor que a ferramenta usa, tirou essas duas opções do preset padrão na versão 4 exatamente por esses motivos. Se você comparar o resultado da ferramenta com o de um otimizador mais antigo e este sair um pouco maior, um viewBox e um title mantidos quase sempre são a diferença. O arquivo menor era o quebrado.

Confira os seus ids à mão

Os ids são o risco mais silencioso. Se algo fora do SVG se refere a um id dentro dele (uma folha de estilo, um script ou um elemento <use> em outro documento apontando para dentro de um sprite), encurtar ou remover esse id quebra a referência sem nenhuma mudança visível na prévia, porque a prévia mostra o arquivo sozinho.

Por isso, deixe Shorten and drop unused ids desmarcado para qualquer arquivo para o qual outro arquivo aponte, e marque-o só para um ícone independente, em que nada fora do arquivo se importa. Num sprite, os ids são a interface inteira.

Essa caixa nem sempre fez o que dizia. Enquanto escrevíamos este guia, descobrimos que o SVGO 4.1, a versão que a ferramenta usa, ainda inclui a limpeza de ids no preset padrão, então os ids eram encurtados ou descartados mesmo com a caixa desmarcada. Agora a ferramenta desliga explicitamente essa limpeza quando a caixa está desmarcada, e um teste no código do site verifica os dois sentidos. Se você otimizou um sprite aqui antes de outubro de 2026, procure no resultado os ids de que o seu site depende.

Os bytes brutos exageram a economia

Os servidores comprimem o SVG na transmissão, e a compressão já lida com repetições. Dois resultados que parecem muito distantes sem compressão costumam ficar bem mais próximos com gzip, e é por isso que a ferramenta mostra os números com gzip ao lado dos brutos. Se uma configuração arriscada compra uma grande economia bruta e quase nada com gzip, fique com o arquivo mais seguro.

Outras formas de fazer

O SVGO também roda na linha de comando:

npx svgo input.svg -o output.svg

Esse comando usa o preset padrão do SVGO. Da versão 4 em diante, o padrão mantém o viewBox e o elemento title, como a ferramenta faz. Para a precisão e as outras configurações, veja a documentação do próprio SVGO. Não existe otimizador de SVG nativo no macOS nem no Windows.

Como confirmar que nada foi enviado

O SVGO roda na aba. Na primeira vez que a página otimiza alguma coisa, o que acontece assim que o exemplo carrega, o navegador baixa o código do próprio SVGO, cerca de 195 KB com gzip; essa é a única requisição que você vai ver no painel Network das ferramentas de desenvolvedor, e ela chega em vez de sair. Depois disso, você pode se desconectar da rede, colar o seu arquivo, e a ferramenta continua funcionando.

Próximo passo

Cole o seu arquivo no SVG optimiser, baixe a precisão para dois e compare as prévias. Se o SVG for um logo a caminho de virar favicon, o Favicon generator o aceita diretamente. Se você pretende embuti-lo no CSS, o Data URI converter diz se vale a pena.