Como funciona a otimização de SVG
O processo de otimização do SVG elimina dados desnecessários gerados por editores, como metadados, comentários e namespaces não usados. Isso reduz o tamanho do arquivo e facilita o carregamento em sites sem afetar elementos essenciais como IDs, classes e referências de gradientes ou filtros.
Além disso, o usuário pode definir a precisão decimal dos atributos geométricos, ajustando o número de casas decimais nos pontos e curvas. Quanto menor a precisão, maior a redução, mas é importante encontrar um equilíbrio para manter o visual original.
O que pode e não pode ser removido
O otimizador preserva IDs, classes, filtros e gradientes para não comprometer funcionalidades dependentes de CSS ou JavaScript. Elementos como <title> podem ser mantidos para fins de acessibilidade, conforme preferência do usuário.
Não há minificação de IDs ou classes e não se faz compressão (como gzip). SVGs com referências externas ou scripts não são modificados, garantindo segurança e integridade do conteúdo.
Visualização e qualidade do SVG otimizado
O ToolMole mostra o SVG original e o otimizado lado a lado, permitindo comparação direta no navegador. Isso ajuda a identificar se houve alteração visual após a otimização, especialmente quando se ajusta a precisão decimal dos pontos.
Para ícones ou ilustrações com curvas delicadas, recomenda-se testar diferentes níveis de precisão antes de baixar. O resultado pode variar conforme a complexidade do SVG e o editor utilizado, mas o objetivo é manter o visual idêntico enquanto reduz o peso.
Perguntas frequentes
Quanto posso reduzir o tamanho de um SVG típico?
A redução depende da quantidade de metadados e precisão dos pontos. SVGs gerados por editores costumam ter excesso de comentários e dados, podendo diminuir até 40% do tamanho, sem comprometer o visual.
O SVG otimizado fica igual em todos os navegadores?
Se a precisão decimal for bem ajustada, o visual permanece idêntico. Recomenda-se comparar as versões no ToolMole, pois curvas muito arredondadas podem sofrer alterações se a precisão for baixa.
Posso escolher quais metadados ou elementos manter?
Sim, você pode optar por manter o elemento <code><title></code> para acessibilidade. Outros dados essenciais como IDs, classes e filtros são mantidos automaticamente para garantir compatibilidade.
É seguro otimizar SVGs com filtros ou gradientes complexos?
Sim, o otimizador preserva referências de filtros e gradientes. Porém, sempre verifique o resultado na visualização, pois SVGs muito elaborados podem exigir precisão maior para não perder detalhes.
O ToolMole funciona com SVGs exportados de qualquer editor?
O otimizador lida bem com SVGs exportados dos principais editores como Illustrator, Inkscape e Figma. Basta garantir que não há scripts ou referências externas, pois esses não são alterados.
Como a precisão decimal afeta a qualidade de ícones?
Reduzir casas decimais pode alterar curvas e linhas de ícones delicados. Teste diferentes níveis de precisão e compare o resultado visual para garantir que não haja distorção.
Problema ou sugestão para esta ferramenta? Conte para nós