SVG Optimizer
Understand SVG Optimizer
Retira metadados de editor, comentários e atributos não usados da marcação SVG e informa a economia exata em bytes.
How it works
SVG exportado do Inkscape, do Illustrator, do Figma ou do Sketch carrega muita informação que o navegador nunca lê: instruções de processamento XML, um DOCTYPE, comentários, um bloco `<metadata>` em RDF e namespaces inteiros de atributos privados de editor, como `inkscape:label` e `sodipodi:docname`. Tudo isso é removido, declarações simples de `style` como `style="fill: #5C5BFE"` são promovidas a atributos de apresentação (`fill="#5C5BFE"`), atributos `id` que nada no documento referencia são descartados e o espaço em branco entre tags é reduzido. Os tamanhos são medidos em bytes UTF-8 antes e depois, então a porcentagem exibida é a economia real na rede antes da compressão.
When to use it
- Limpar um conjunto de ícones antes de embuti-los em uma biblioteca de componentes ou montar um sprite
- Reduzir o payload de um SVG embutido no HTML, onde cada byte está no caminho crítico
- Remover o nome do documento, os nomes de camadas e os metadados de autoria de um editor antes de publicar um arquivo
- Deixar um SVG gerado por máquina legível o bastante para editar à mão
Watch out for
- Um `id` referenciado apenas por CSS ou JavaScript externos parece não usado e é removido. Se a sua folha de estilo mira `#logo-path` ou o seu script chama `getElementById`, confira a saída antes de publicá-la.
- Promover `style` inline a atributos reduz a especificidade. Um estilo inline vence toda regra de folha de estilo; um atributo de apresentação perde para todas elas, então uma regra antes sobreposta pode agora vencer.
- Os dados de path ficam intocados. As coordenadas não são arredondadas, os paths não são mesclados e as formas não são convertidas — as economias mais profundas em uma ilustração detalhada exigem um otimizador completo como o SVGO.
- A economia em bytes encolhe depois de gzip ou brotli. Metadados repetitivos comprimem bem, então uma redução bruta de 60% pode ficar mais perto de 25% na rede.
Not the right tool for: Sanitizar SVG não confiável. Isto é um otimizador de tamanho, não um filtro de segurança — um SVG recebido de um usuário pode carregar `<script>`, manipuladores de evento e `foreignObject`, e precisa ser sanitizado no servidor antes de ser renderizado.
Frequently Asked Questions
Quanto a otimização de SVG reduz o tamanho do arquivo?
As reduções típicas ficam entre 20% e 70%. SVGs exportados do Inkscape, do Adobe Illustrator ou do Figma trazem muitos metadados de editor, comentários e atributos redundantes. Um SVG exportado de 50KB costuma virar 10 a 20KB depois da otimização — uma melhoria crítica em sprites de ícones.
A otimização vai quebrar as animações do meu SVG?
É possível. Este otimizador apaga atributos id que ele não vê referenciados por url(#id) ou href="#id", então CSS ou JavaScript que mira um elemento por ID pode deixar de casar. Animações CSS baseadas em classe e SMIL dentro do arquivo não são afetados. Confira a saída antes de substituir um SVG animado.
Qual é a diferença entre minificação e otimização?
A minificação só remove espaços em branco e comentários. A otimização também reescreve conteúdo: descarta metadados de editor, promove propriedades simples de estilo a atributos de apresentação e apaga IDs não referenciados. Esta ferramenta faz as duas coisas. Ela não mescla paths, não colapsa grupos nem converte formas em paths — isso é o SVGO que faz.
How to Use SVG Optimizer
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.