1001Ferramentas
Dev

Otimizador de SVG

Reduza o tamanho de arquivos SVG removendo metadados, comentários, atributos de editores (Inkscape, Illustrator) e espaços desnecessários. Processado no navegador.

O que é removido

  • Comentários HTML/XML (<!-- ... -->)
  • Elementos de metadados (<metadata>, <title>, <desc>)
  • Declaração XML (<?xml ... ?>)
  • Atributos de editores: inkscape:*, sodipodi:*, sketch:*, xmlns:xlink não utilizado
  • Espaços em branco, quebras de linha e indentação desnecessárias

Limpeza de SVG sem mexer no desenho

SVG exportado do Inkscape, Illustrator ou Figma vem carregado de coisas que o navegador não usa: metadados RDF, comentários, atributos inkscape: e sodipodi:, indentação. Esse peso vai junto para produção em cada ícone do site. Cole o código (ou carregue o arquivo), marque o que quer remover e veja o antes e o depois lado a lado, com o tamanho em bytes e o percentual de redução. Depois é copiar ou baixar o arquivo limpo.

A limpeza é conservadora de propósito: saem a declaração XML, o DOCTYPE, comentários, os elementos metadata, title e desc, os namespaces e atributos de editor (Inkscape, Sodipodi, Sketch) e o espaço em branco entre as tags. O desenho em si não é tocado: nada de reescrever paths, arredondar coordenadas ou fundir formas, que é o que um otimizador agressivo como o SVGO faz. Os tamanhos mostrados são bytes reais de UTF-8, não contagem de caracteres.

Confira o resultado antes de publicar: cole o SVG otimizado numa aba do navegador e veja se renderiza igual. Dois cuidados: o elemento title é o que leitores de tela anunciam, então deixe a opção de metadados desmarcada em ícones que precisam de acessibilidade; e se o arquivo usa referências xlink:href (comum em sprites antigos), a remoção de atributos de editor apaga o namespace xlink e pode quebrar a referência. Tudo roda no navegador, o arquivo não é enviado.

Perguntas frequentes

Isso substitui o SVGO?
Não. O SVGO reescreve o desenho (encurta paths, arredonda coordenadas); aqui só se removem metadados, comentários, atributos de editor e espaço em branco. Para arquivos saídos do Inkscape ou do Illustrator, essa limpeza sozinha já corta bastante.
A otimização pode quebrar meu SVG?
Pode, em dois casos: arquivos que dependem de xlink:href (a limpeza de atributos de editor remove o namespace xlink) e ícones que precisam do title para acessibilidade. Desmarque a opção correspondente e compare o resultado.
Meu arquivo é enviado para algum servidor?
Não. A limpeza é feita com JavaScript na própria página; o conteúdo só sai da sua máquina se você copiar ou baixar o resultado.

Ferramentas Relacionadas