EN
PT
ES
Otimizador de SVG
Reduza arquivos SVG no navegador. Remova metadados, colapse grupos, arredonde a precisão numérica e, opcionalmente, retire width/height para escala responsiva.
O que faz um otimizador de SVG?
Arquivos SVG exportados por ferramentas de design (Figma, Sketch, Illustrator, Inkscape) costumam estar 30-70% maiores do que precisam. Editores deixam comentários, metadados de assinatura, CSS redundante, grupos vazios e excesso de precisão numérica que olho humano nenhum percebe. Um otimizador reescreve o mesmo desenho num SVG menor e equivalente — pixel-idêntico para o renderizador, mas com fração do tamanho. Tudo acontece localmente no seu dispositivo — seu SVG nunca é enviado, nunca é copiado para um servidor, nunca é registrado. Essa garantia de privacidade importa para arquivos de marca, ícones internos do produto e qualquer SVG que não devesse ficar em servidor de terceiros. Os padrões são pensados para ícones: precisão de 2 casas, remover comentários e metadados de editor, colapsar grupos inúteis e manter o viewBox original para escala responsiva. Para ilustrações com curvas sutis suba a precisão para 3; para conjuntos de ícones responsivos a opção remover dimensões tira width/height fixo para o CSS escalar os ícones para o tamanho que você definir no stylesheet.
Como otimizar um SVG
Cole o markup ou solte um arquivo .svg na zona de drop. Ajuste os checkboxes — os padrões são sensatos. Escolha a precisão (2 serve para a maioria dos ícones) e clique em Otimizar. A pré-visualização antes/depois garante que nada visual mudou. Copie o markup otimizado ou baixe o arquivo direto.
Dicas que economizam mais bytes
Use uma paleta única e evite imagens raster embutidas — PNG em base64 dentro do SVG anula o formato. Converta texto em path só quando precisar de um glifo específico; senão mantenha <text> para leitores de tela e buscadores enxergarem o conteúdo. Comprima o resultado com gzip/brotli no servidor: SVG otimizado comprime muito bem, costumando ficar em 70% do tamanho pós-otimização.
O que cada opção faz
| Opção | Efeito | Notas |
|---|---|---|
| Remover comentários | Remove blocos deixados pelo editor. | Quase sempre seguro. Desative só se os comentários documentarem o arquivo. |
| Remover metadados | Tira elementos | Seguro — metadados são para a ferramenta de design, não o renderer. |
| Colapsar grupos inúteis | Remove | Visualmente idêntico, costuma economizar 5–15%. |
| Remover width/height (SVG responsivo) | Remove width/height para o CSS dimensionar o SVG. | Útil em sistemas de ícones; desligado por padrão para o arquivo ficar autônomo. |
| Precisão numérica | Arredonda números de path para N casas. | 2 é o padrão; 3 para ilustrações finas; 1 só em ícones minúsculos. |
Perguntas frequentes
A otimização pode quebrar meu SVG?
Algo é enviado para vocês?
E SVG sprites ou symbols?
Qual o tamanho ideal de um ícone?
Devo manter xmlns e viewBox?
xmlns o SVG não renderiza fora do HTML5; sem viewBox você perde escala responsiva. Os dois atributos são pequenos e vale a pena manter.