Um otimizador de SVG rápido e privado
Scalable Vector Graphics (SVGs) são o padrão para ícones e ilustrações nítidos e independentes de resolução na web. No entanto, quando você exporta um SVG de uma ferramenta de design, o arquivo resultante raramente está otimizado para produção. Este otimizador de SVG permite limpar instantaneamente seus gráficos vetoriais, removendo dados desnecessários e reduzindo o tamanho dos arquivos sem sacrificar a qualidade visual.
Como esta ferramenta funciona inteiramente no seu navegador, seus gráficos nunca são enviados para um servidor. Você pode comprimir com segurança arquivos SVG que contêm logotipos proprietários, designs de produtos não lançados ou diagramas confidenciais. O processamento é instantâneo, fornecendo feedback em tempo real sobre a redução do tamanho do arquivo e uma comparação visual de antes e depois para garantir que seus gráficos permaneçam perfeitamente intactos.
Por que você precisa comprimir arquivos SVG
Ao contrário de imagens rasterizadas (como JPEGs ou PNGs) que armazenam dados de pixels, os SVGs são basicamente arquivos de texto XML com instruções matemáticas para desenhar formas. Quando editores de vetores geram esses arquivos, eles costumam incluir uma grande quantidade de dados extras que os navegadores não precisam para renderizar a imagem.
As causas mais comuns de arquivos SVG pesados incluem:
- Metadados do editor: Tags e atributos específicos do software que criou o arquivo, usados apenas para fins de edição.
- Comentários e elementos vazios: Notas de desenvolvedores, grupos vazios (
<g>) e camadas ocultas que não contribuem em nada para o resultado visual final. - Precisão excessiva: Coordenadas de caminho com seis ou mais casas decimais (ex.:
14.123456), que ocupam bytes desnecessários. - Atributos padrão: Estilos e atributos que correspondem ao comportamento padrão do navegador e não precisam ser declarados explicitamente.
Ao usar um minificador de SVG, você remove esse texto oculto. Reduzir o tamanho do arquivo SVG faz com que suas páginas carreguem mais rápido, consumam menos banda e melhorem o desempenho geral do site e seu ranqueamento de SEO.
Como minificar SVG online
Esta ferramenta oferece várias opções personalizáveis para dar a você um controle detalhado sobre o processo de otimização. Dependendo de como você planeja usar o gráfico final, é possível ajustar essas configurações para encontrar o equilíbrio perfeito entre o tamanho do arquivo e a legibilidade do código.
Precisão decimal
Os caminhos vetoriais são desenhados usando coordenadas. Softwares de design costumam exportar essas coordenadas com extrema precisão, resultando em longas sequências de números. Ao diminuir a precisão decimal (o número de casas decimais), você pode reduzir drasticamente a quantidade de caracteres do seu arquivo. Uma precisão de 1 ou 2 geralmente é perfeita para ícones web. Se notar que as curvas estão serrilhadas ou as formas estão distorcidas na visualização, basta aumentar o controle deslizante de precisão até que a imagem pareça correta novamente.
Otimização multipassos
A otimização costuma ser um processo em camadas. Remover um elemento desnecessário pode deixar um elemento pai vazio, que então também pode ser removido. Ativar a configuração "Multipassos" diz ao otimizador para executar suas rotinas de limpeza repetidamente até que o tamanho do arquivo não possa mais ser reduzido. Isso garante o menor resultado possível.
Remover dimensões
Por padrão, muitos SVGs são exportados com atributos width e height fixos (ex.: width="500px"). Embora isso trave a imagem em um tamanho específico, dificulta o web design responsivo. Marcar a opção "Remover dimensões" elimina esses atributos, mas preserva o viewBox. Isso permite que o SVG seja redimensionado de forma fluida com base no CSS do seu contêiner pai, tornando-o muito mais fácil de usar em layouts web modernos.
Pretty print
Se o seu objetivo é o menor tamanho de arquivo possível, deixe esta opção desmarcada. A ferramenta gerará uma única e densa linha de código. No entanto, se você estiver limpando um SVG que planeja editar manualmente, animar ou incorporar diretamente em um documento HTML, marcar "Pretty print" formatará o código final com recuos e quebras de linha organizados.
Melhores práticas para gráficos vetoriais
Otimizar seus SVGs é apenas um passo para criar um site rápido e acessível. Ao trabalhar com gráficos vetoriais, considere como eles serão implementados. Se você for incorporar o SVG diretamente no seu HTML (inline), minificar o SVG é fundamental para manter o tamanho do documento pequeno. Você também pode passar a página inteira por um Minificador de HTML ou Minificador de CSS para obter o máximo de desempenho.
Sempre verifique a visualização prévia após a otimização. Embora a maioria dos SVGs seja comprimida sem falhas, ilustrações muito complexas com gradientes detalhados ou caminhos de recorte (clipping paths) precisos podem exigir uma maior precisão numérica para manter sua aparência original. O visualizador integrado de antes e depois facilita a identificação de qualquer alteração indesejada antes de baixar o arquivo minificado.
Por fim, embora os SVGs sejam perfeitos para logotipos, ícones e ilustrações flat, eles não são adequados para fotografias complexas. Se você tiver um SVG composto principalmente por imagens rasterizadas incorporadas (como JPEGs codificados em base64), a otimização terá pouco efeito. Nesses casos, pode ser melhor converter o gráfico por completo usando um conversor de SVG para PNG.