Otimizador de SVG

O que é Otimizador de SVG?

O Otimizador de SVG é uma ferramenta gratuita no navegador para web designers, autores de ícones e desenvolvedores front-end que precisam enxugar SVG escrito à mão ou exportado antes de publicá-lo. Editores vetoriais adicionam peso invisível: comentários XML, blocos de metadados, atributos do Inkscape/Sodipodi/Illustrator, casas decimais redundantes, transformações inúteis, grupos invólucros e IDs e defs que nada referencia. Ative cada limpeza em Configurações, cole o código ou solte um arquivo .svg, veja os renders Original e Otimizado se atualizarem lado a lado e leia as estatísticas Antes, Depois, Economizado, Gzip e Brotli. Copie o resultado ou baixe como .min.svg. Use-o para aliviar ícones inline, folhas de sprites, logotipos e ilustrações.

Como usar Otimizador de SVG

1. Cole seu SVG, ou solte/envie um arquivo .svg — o código preenche a caixa de entrada.
2. Abra Configurações e ative exatamente as limpezas desejadas: arredondar coordenadas, remover comentários, metadados e atributos do editor, grupos vazios, IDs e defs não usados, combinar transformações, minificar estilos inline, encurtar cores hex, remover valores padrão e minificar espaços.
3. Se o arredondamento de coordenadas estiver ativo, defina a precisão (0-5 casas decimais).
4. Compare os renders Original e Otimizado lado a lado para confirmar que o desenho continua certo.
5. Leia as estatísticas Antes, Depois, Economizado, Gzip e Brotli para ver o ganho real de tamanho.
6. Copie o SVG otimizado ou baixe como arquivo .min.svg.

Exemplos

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

Perguntas frequentes

O que exatamente o otimizador remove?

Com as opções correspondentes ativadas: comentários XML, elementos <metadata>, <title> e <desc>, atributos de namespace do editor (Inkscape, Sodipodi, Illustrator), grupos vazios, IDs que nada referencia e <defs> não referenciados. Ele também pode arredondar atributos numéricos e dados de traçado, combinar transformações inúteis, minificar atributos style e o CSS de <style>, encurtar cores hex (#ffffff→#fff) e remover atributos de apresentação padrão como fill-opacity="1".

Arredondar as coordenadas vai mudar a aparência do meu SVG?

Arredondar para baixa precisão pode deslocar pontos por uma fração minúscula de unidade, normalmente imperceptível mas menor. Aumente a precisão (até 5 casas) para geometria exata, ou desligue o arredondamento para manter os números intactos.

Posso carregar um arquivo e pré-visualizar o resultado?

Sim. Solte ou envie um arquivo .svg (ou cole o código) e os renders Original e Otimizado aparecem lado a lado para detectar qualquer quebra. Depois copie a saída ou baixe o .min.svg otimizado — nada é enviado; o arquivo é lido localmente.

O que significam os números de Gzip e Brotli?

O tamanho Gzip é medido comprimindo de fato o SVG otimizado no seu navegador, então reflete os bytes reais em uma conexão com gzip. O número Brotli é uma estimativa derivada desse tamanho gzip (o brotli costuma comprimir texto um pouco menor); um codificador brotli real é pesado demais para embutir, por isso é marcado com um til.

Meu SVG é enviado para algum lugar?

Não. Análise, limpeza, medição de tamanho e serialização acontecem todas localmente no seu navegador com o DOMParser integrado. Nada é enviado a um servidor, então a ferramenta funciona offline e a sua arte permanece privada.