Ir para o conteúdo principal
Bethemesh
Imagens e gráficos

Otimizador SVG

Otimize os seus ficheiros SVG localmente removendo comentários, metadados e dados do editor, e compactando espaços e casas decimais.

  • Área de transferência
  • Exportar

Integrar este widget

Personalize o resultado, verifique a pré-visualização e copie o código.

Pré-visualização

Tipo de código de integração

Código a copiar

Responsivo e redimensionado automaticamente pela Bethemesh.

Código SVG

Pré-visualização

Opções de otimização

Esta ferramenta foi útil?

Como funciona esta ferramenta?

Um SVG exportado do Inkscape, Illustrator ou Figma contém muitas vezes mais texto do que desenho: declaração XML, comentários, metadados, atributos próprios do editor e coordenadas com cinco casas decimais. Este otimizador remove o supérfluo e arredonda os números sem transformar o desenho numa imagem rasterizada: o ficheiro continua vetorial, legível e editável. Tudo acontece no seu navegador.

Cole o código de um SVG ou importe um ficheiro .svg. A declaração XML e o DOCTYPE são sempre removidos; um comentário antes da etiqueta svg, frequente nos editores, é aceite. Clique em Otimizar SVG: aparecem o resultado, a pré-visualização e três valores, tamanho inicial, tamanho otimizado e ganho em bytes e em percentagem.

Quatro opções vêm ativadas: remover comentários, remover os blocos metadata, remover os dados do Inkscape e do Sodipodi (atributos inkscape:, sodipodi: e os seus espaços de nomes) e reduzir os espaços entre etiquetas. Uma quinta, desativada por predefinição, retira width e height da etiqueta svg raiz quando existe um viewBox; os retângulos e imagens no interior mantêm os seus.

A precisão decimal, de 0 a 8 casas (3 por predefinição), arredonda os números dos valores de atributos: traçados, coordenadas, viewBox, transformações. Os zeros inúteis desaparecem (8.00000 passa a 8 e 0.5 a .5). Identificadores, classes, ligações e texto visível não são alterados. Copie o código ou descarregue optimized.svg.

Como usar esta ferramenta

  1. Adicione o SVG

    Cole o código ou importe um ficheiro .svg completo.

  2. Ajuste as opções

    Mantenha as predefinições ou ajuste a precisão decimal.

  3. Verifique e exporte

    Confirme a pré-visualização e o ganho e copie ou descarregue o resultado.

Cálculo do ganho apresentado

Os tamanhos são medidos em bytes UTF-8, antes e depois da otimização.

Ganho em percentagem

g = (o − n) ÷ o × 100

Para o ícone do Inkscape: (365 − 148) ÷ 365 × 100 = 59,5 %.

g
ganho em percentagem
o
tamanho inicial em bytes
n
tamanho otimizado em bytes

Casos de uso

Ícones de um site

Torne mais leves os ícones exportados de um editor antes de os integrar no HTML ou num sprite.

SVG inline no código

Obtenha uma marcação compacta e limpa para colar num componente ou num e-mail.

Logótipo para uma Data URI

Reduza o SVG antes de o codificar em Base64 numa folha de estilos.

Exemplos

Ícone exportado do Inkscape

Predefinições. O desenho é idêntico: desaparecem apenas o texto inútil e as casas decimais além da terceira.

Entrada

Declaração XML, comentário, metadata, atributos inkscape:, traçado M12.34567 8.00000 L35.65433 8.00000 L24.00000 40.12345 Z — 365 bytes

Resultado

<path d="M12.346 8 L35.654 8 L24 40.123 Z" …> — 148 bytes, ganho de 217 bytes (59,5 %)

Precisão reduzida a 1

Um desvio de 0,05 unidades é invisível num ícone de 48 unidades, mas pode deformar uma planta ou um mapa detalhado: verifique a pré-visualização.

Entrada

O mesmo ícone de 48 × 48, precisão 1

Resultado

M12.3 8 L35.7 8 L24 40.1 Z — 142 bytes (61,1 %)

Dicas e boas práticas

  • Mantenha o viewBox: é ele que permite ao SVG adaptar-se a qualquer tamanho.
  • Remova width e height apenas se o CSS fixar o tamanho; caso contrário, a imagem pode aparecer a 100 % da largura.
  • Num ícone, 1 ou 2 casas decimais costumam bastar; mantenha 3 ou mais num desenho muito detalhado.
  • Guarde o ficheiro original do editor: os dados removidos (camadas, guias) não se recuperam a partir do SVG otimizado.

Fontes e referências

Perguntas frequentes

O aspeto muda?

Não com as opções predefinidas num desenho comum. Uma precisão muito baixa pode deslocar ligeiramente alguns pontos: compare com a pré-visualização.

As cores e os identificadores são alterados?

Não. As cores hexadecimais, id, class e ligações mantêm-se, tal como o texto das etiquetas text.

Os dados do Illustrator ou do Figma são removidos?

Os comentários e metadata, sim. Os atributos proprietários removidos são os do Inkscape e do Sodipodi; os de outros editores ficam.

A ferramenta funde traçados ou simplifica formas?

Não. Limpa o código e arredonda números, sem reescrever a geometria como faria o SVGO.

O ficheiro continua editável?

Sim, continua a ser um SVG de texto que qualquer editor vetorial ou de código consegue abrir.

O meu SVG é enviado para um servidor?

Não. A otimização é feita pelo seu navegador.

Ferramentas relacionadas

Continue com estas ferramentas

Ferramentas semelhantes ou complementares a esta.

Ferramentas semelhantes

Converter SVG

Converta ficheiros SVG para PNG, JPEG ou WebP com pré-visualização e opções de saída.

Imagens e gráficosUtilizar esta ferramenta

Gerador de favicon

Crie um favicon.ico e os ícones PNG de um site (16 a 512 px) a partir de uma imagem, no navegador.

Imagens e gráficosUtilizar esta ferramenta

Leia também

GuiaFormatosIniciante

SVG: compreender o formato vetorial

Descubra como um ficheiro SVG descreve formas, utiliza viewBox e se integra numa página Web, com boas práticas de responsive, acessibilidade e segurança.

31 de agosto de 20263 min
TutorialBoas práticasIniciante

Otimizar imagens para a Web sem perder qualidade

Redimensionamento, compressão, WebP, AVIF e boas práticas: um método completo para tornar as imagens de um site mais leves sem degradar desnecessariamente o resultado.

30 de agosto de 20264 min