Softonic

Comprimir SVG

Etapa 1 / 2
Próximo

Um SVG exportado do Figma, Illustrator ou Sketch geralmente carrega de 2 a 5 vezes mais marcação do que precisa: namespaces do editor, comentários, grupos vazios, transformações redundantes e coordenadas com 6 casas decimais. Esta ferramenta executa seu SVG através de uma passagem estilo SVGO, removendo o ruído enquanto mantém a saída renderizada idêntica em pixels.

Como comprimir um SVG

  1. 1

    Cole ou faça upload do seu SVG

    Aceita texto XML bruto ou um arquivo .svg.

  2. 2

    Escolha um nível de otimização

    Seguro (remover comentários e metadados do editor), agressivo (colapsar grupos, arredondar coordenadas, mesclar caminhos) ou personalizado.

  3. 3

    Revise a diferença

    Compare a contagem de bytes antes e depois, e visualize o resultado renderizado para confirmar que nada mudou visualmente.

  4. 4

    Copie ou baixe

    Cole o SVG otimizado diretamente no seu código ou salve como um arquivo.

O que incha um SVG

Abra um SVG exportado do Figma em um editor de texto e você verá normalmente:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Gerador: Figma ... -->
  <title>ícone</title>
  <desc>Criado com Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Quase todas as linhas são removíveis. A saída renderizada só precisa do svg, viewBox e path.

O que o otimizador remove

Removido Por que é seguro
Comentários XML Nunca renderizado
Namespaces do editor (sketch, figma) Não utilizados pelos navegadores
<title> / <desc> (opcional) Texto acessível, mantenha se significativo
Grupos <g> vazios Sem efeito visual
Valores de atributo padrão Os navegadores usam padrões de qualquer forma
Transformações de identidade translate(0,0) não faz nada
Decimais de coordenadas 3 decimais parecem idênticos na tela
IDs não utilizados Mantenha apenas IDs referenciados em outro lugar

Armadilhas

  • Não remova IDs referenciados por CSS ou por url(#...) em preenchimentos, máscaras, filtros. O modo agressivo pode quebrar gradientes.
  • Mantenha viewBox. Sem ele, o SVG não escalará responsivamente.
  • Mantenha <title> se você depender dele para acessibilidade (leitores de tela o anunciam).
  • Evite colapsar instâncias <use>. O otimizador pode inlineá-las e perder o padrão de fonte da verdade.

Quando a compressão economiza bytes reais

SVG é texto, o que significa que gzip no servidor já remove muita redundância. Um SVG que cai de 4KB para 1KB descompactado pode cair apenas de 1.2KB para 0.7KB na transmissão. Ainda vale a pena, e a fonte menor é mais fácil de ler.

Perguntas frequentes

O modo seguro não vai. O modo agressivo pode remover IDs referenciados por animações CSS ou SMIL, se seu SVG tiver animações, use o modo seguro ou coloque manualmente os IDs na lista branca.

Exportações do Figma/Illustrator geralmente diminuem 50-80%. SVGs escritos à mão já são compactos e geralmente caem apenas 10-20%.

Por padrão sim, atributos <title>, <desc> e aria-* são preservados. Você pode optar por removê-los se o SVG for puramente decorativo e o HTML ao redor fornecer o rótulo.

Sim. O atributo xmlns é mantido porque é necessário ao colar SVG diretamente no HTML. SVG inline é geralmente o método de entrega mais rápido para pequenos ícones.

Ferramentas relacionadas

Vetorizador de PNG para SVG

Transforme imagens raster PNG em caminhos SVG no navegador. Ideal para logotipos, ícones e desenhos lineares. Controle limiar, quantidade de cores e suavização.

Gerador de letras de grafite

Crie letras de grafite com efeitos tag, bubble, block, estêncil, neon e wild. Ajuste as cores e exporte PNG ou SVG diretamente no navegador.

Criador de Crachás

Crie até 60 crachás imprimíveis a partir de uma lista Nome | segunda linha. Escolha 8 cartões ou 15 etiquetas por página em A4 ou US Letter e imprima localmente.

Criador de Capa de Álbum

Crie localmente uma capa quadrada com título, artista, texto opcional, tema e sua imagem. Exporte em SVG ou PNG.

Quadro branco online

Desenhe ideias e organize formas, notas e imagens locais em um quadro branco privado no navegador. Exporte PNG, JPEG, SVG ou JSON editável.

Criador de convites

Faça convites de casamento, festa de 15 anos, aniversário, chá de bebê ou evento corporativo. Personalize texto e cores, veja a prévia ao vivo e baixe um PNG para imprimir em 13 × 18 cm.