Visualizador e minificador de SVG

O que é um visualizador e minificador de SVG?#

SVG é o formato ideal para ícones, logos e arte linear na web — permanece nítido em qualquer tamanho e é editável como texto. Mas arquivos SVG exportados por ferramentas de design carregam muito lixo: namespaces de editor do Inkscape e Sodipodi, blocos <metadata>, comentários de autoria e espaços em branco entre cada tag. Essa bagagem incha o arquivo e dá dor de cabeça a quem lê o código-fonte. Um minificador de SVG remove o que não afeta a renderização e relata quanto economizou.

Esta página é tanto um visualizador quanto um minificador. Cole o código SVG à esquerda, veja-o renderizado à direita, mude para Minificar para rodar uma passagem de limpeza de autoria própria que remove comentários, metadados, namespaces de editor e espaços em branco entre elementos, e leia a economia de bytes. A pré-visualização é renderizada através de um data URI de imagem, de modo que qualquer script embutido no SVG nunca executa — você pode inspecionar com segurança um arquivo não confiável.

Como usar#

1. Cole o seu SVG no painel Entrada à esquerda, ou clique em Exemplo para carregar um pequeno exemplo.
2. O painel Saída e a pré-visualização atualizam imediatamente. Por padrão a barra de ferramentas está em Minificar, então a saída é o SVG limpo e menor.
3. Mude para Original se quiser que a saída mostre o código-fonte original intacto (útil para comparar com a versão minificada).
4. Leia o painel de estatísticas sob os painéis:
   • Antes / Depois / Economizado — o tamanho UTF-8 da entrada versus a saída, e o percentual economizado.
   • Resumo do que foi removido — quantos comentários, blocos de metadados, elementos de editor, atributos de editor e nós de espaço em branco foram removidos.
   • ViewBox — a geometria width / height / viewBox lida do <svg> raiz, para que você confirme o tamanho da prancheta num relance.
5. Use Copiar ou Baixar no painel de saída para levar o SVG minificado. Use Limpar para esvaziar ambos os painéis.

Principais funcionalidades#

• Um minificador de verdade, escrito do zero — não é o svgo. svgo é a ferramenta padrão do Node, mas depende do fs e do path do Node e não roda de forma limpa num navegador. Esta página traz a sua própria caminhada pela árvore, então funciona sem nenhuma dependência do lado do servidor.
• Cinco categorias de lixo removidas. Comentários, blocos <metadata>, elementos e atributos de namespace do Inkscape/Sodipodi e espaços em branco entre elementos — cada um contabilizado e relatado.
• Tratamento de espaços em branco consciente de texto. Espaços dentro de <text>, <tspan>, <title>, <desc>, <style> e <script> são preservados, então rótulos e CSS embutido sobrevivem à passagem.
• Pré-visualização segura. A renderização usa uma <img> com um data URI, que o navegador trata como uma imagem sem execução de script — scripts embutidos no SVG não rodam. Você pode colar um arquivo não confiável sem risco.
• Contabilização honesta de bytes. Os tamanhos são medidos em bytes UTF-8 (não em contagem de caracteres), então um arquivo com texto CJK ou emoji reporta o seu tamanho real na transmissão.
• 100% local. Análise e serialização acontecem no seu navegador. O SVG nunca sai da página.

Exemplo prático#

Uma exportação típica do Inkscape pode começar com várias linhas de declarações de namespace de editor e um bloco <metadata> antes da arte real:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

Cole-o, deixe o modo em Minificar, e a saída colapsa para:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

O painel de estatísticas relata aproximadamente antes ~520 bytes, depois ~210 bytes, economia ~60%, com o resumo da remoção mostrando 1 comentário, 1 bloco de metadados e 1 atributo de editor (inkscape:connector-curvature). O sinal de verificação renderiza de forma idêntica na pré-visualização — nada que afetasse o desenho foi removido.

FAQ#

Isto executa scripts embutidos no SVG?#

Não. A pré-visualização é renderizada como <img src="data:image/svg+xml;base64,…">, e imagens carregadas via <img> são um contexto sem script — o navegador não executará nenhum <script> dentro daquele SVG. Isso torna a página segura para inspecionar arquivos SVG que você não escreveu. A tag <script> do código-fonte é preservada na saída minificada, no entanto; se ela executa depende de como você embute o SVG depois.

Por que não simplesmente usar o svgo?#

svgo é a ferramenta certa num pipeline de build Node, mas depende dos módulos fs e path do Node e não roda de forma limpa numa aba do navegador. O minificador desta página é uma caminhada pela árvore autossuficiente, sem dependências do Node, então funciona totalmente do lado do cliente — ao custo de ser menos agressivo do que as otimizações mais profundas do svgo.

A economia é pequena no meu arquivo.#

Arquivos que já foram escritos à mão (sem namespaces de editor, sem metadados, sem comentários) têm pouco a remover, então a economia pode ser de apenas alguns por cento em espaços em branco. As maiores vitórias vêm de exportações de ferramentas de design — Inkscape, Illustrator — que é exatamente de onde origina a maior parte do lixo.

A minificação muda como o SVG renderiza?#

Não, para as categorias que esta ferramenta remove: comentários, metadados, namespaces de editor e espaços em branco entre elementos não carregam semântica de renderização. Espaços em branco dentro de elementos textuais (<text>, <title>, <desc>, <style>, <script>) são deliberadamente preservados, porque ali podem ser relevantes.