Otimizar SVG: SVG exportado de editor vem cheio de coisa que o navegador ignora. Aqui você limpa esse excesso, escolhe a precisão decimal e vê o código original e o otimizado lado a lado antes de baixar.
Como otimizar o SVG
- Arraste o arquivo .svg ou cole o código na caixa da esquerda.
- Deixe marcadas as limpezas que interessam. As padrão são seguras para ícone e ilustração estática.
- Escolha a precisão decimal. Duas casas atendem quase tudo; uma casa encolhe mais e pode deformar curva delicada.
- Clique em Otimizar e confira a prévia. Depois, Baixar SVG ou Copiar código para colar direto no projeto.
O que engorda um SVG exportado
Abra um SVG do Illustrator num editor de texto e boa parte do que está lá não desenha nada. São blocos de metadados do programa, comentários de geração, títulos automáticos e camadas escondidas que ficaram no arquivo.
O outro peso é numérico. Editor vetorial grava coordenadas com seis, sete casas decimais, e cada casa é um caractere a mais em cada ponto de cada curva. Num ícone com centenas de pontos, arredondar para duas casas corta uma fatia grande do arquivo sem que ninguém note diferença na tela.
O que é seguro remover
Comentários, metadados e lixo de Inkscape e Adobe podem sair sem medo: nenhum navegador usa esse conteúdo para renderizar.
Elementos com display:none merecem um segundo de atenção. Em ícone estático eles são sobra de camada escondida e podem ir embora. Se o SVG faz parte de uma interface que liga e desliga partes do desenho por CSS ou JavaScript, esses elementos podem ser justamente os que aparecem depois, e aí removê-los quebra a animação. Na dúvida, compare a prévia antes de substituir o arquivo do projeto.
Perguntas frequentes
É o mesmo que SVGO?
Não. É um minificador leve e seguro online. Para pipelines avançados use SVGO no seu build.
Quanto o arquivo diminui?
Depende de quanta sujeira o exportador deixou. Ícone vindo direto do Illustrator ou do Inkscape costuma perder uma boa parte do tamanho só com metadados e decimais. Um SVG já escrito à mão e enxuto muda pouco.
Qual precisão decimal escolher?
Duas casas é o equilíbrio para a maioria dos ícones. Uma casa encolhe mais e serve para formas simples e geométricas. Em desenho com curva orgânica, fique em duas ou três, senão o contorno enruga.
Posso colar o código em vez de enviar arquivo?
Pode. A caixa da esquerda aceita o código colado, e o resultado sai na caixa da direita pronto para copiar.
Pode quebrar animações ou scripts?
Remover elementos com display:none e metadados é seguro na maioria dos ícones estáticos. Revise a prévia se o SVG for complexo.
