Otimizar não é validar nem sanitizar
SVG é XML que o navegador representa como gráfico, mas também pode conter referências, estilos e comportamento. Remover espaços, metadados do editor ou grupos redundantes pode poupar bytes sem decidir se um ficheiro é adequado para uma página. Separe três perguntas: o documento é XML válido, mantém a imagem pretendida e é aceitável para o destino? Um otimizador pode simplificar um caminho ou remover comentários; um sanitizador tem de decidir como tratar script, manipuladores de eventos, links externos, foreignObject e URLs perigosos. Um resultado menor não prova segurança. Quando o SVG vem de outra pessoa, reveja-o com uma política de conteúdo e abra de novo a saída antes de publicar.
Exemplo controlado: conte elementos DOM e bytes
Trabalhe sempre numa cópia. Comece com um ícone simples que tenha dois grupos aninhados, um título útil, uma descrição, metadados do editor e quatro formas. Antes de otimizar, conte elementos DOM com o inspetor ou procure as etiquetas svg, g, path, title e desc; registe também o tamanho do ficheiro em bytes. Execute o otimizador e compare os dois números. Grupos vazios ou metadados do editor podem desaparecer, mas um título acessível não deve sumir sem substituição planeada. Guarde o original e a saída com nomes diferentes. A redução só importa se a representação, a finalidade e as referências necessárias sobreviverem à alteração.
Confirme a renderização, não apenas o código
Abra original e saída na mesma versão do navegador e, se o ícone for usado numa interface, teste-o também nesse contexto. Verifique contorno, preenchimento, traço, opacidade, viewBox, proporção e recorte em tamanhos pequenos e grandes. Aumente o zoom para detetar alterações de precisão em curvas e linhas finas. Se o SVG usar um ID para degradado, clipPath, máscara ou marcador, confirme que cada url(#id) ainda aponta para um ID existente. Uma comparação visual rápida pode ocultar uma falha visível apenas num fundo escuro, com zoom elevado ou com uma folha CSS específica. Para gráficos de produção, mantenha uma captura de referência ou uma verificação visual repetível.
Preserve o significado acessível
Um ícone decorativo pode ser ocultado de tecnologias de assistência no contexto em que é usado; um gráfico que comunica informação necessita de nome acessível ou alternativa equivalente. Não remova title, desc, aria-label, aria-labelledby ou texto visível sem saber como o significado será exposto depois. Confirme que aria-labelledby não cita IDs removidos ou renomeados. O texto alternativo deve indicar a função, não a geometria interna: “Transferir relatório” ajuda mais do que “seta azul para baixo”. A otimização pode reduzir atributos repetidos, mas não deve transformar uma imagem compreensível numa imagem silenciosa. Consulte o guia de QR acessíveis quando o SVG fizer parte de um código que também precisa de instruções fora da imagem.
Procure conteúdo ativo ou externo antes de confiar
Inspecione o XML antes de o incorporar. Sinais que exigem revisão incluem script, atributos onload ou outros on*, valores xlink:href ou href para outro endereço, imagens externas, foreignObject, objetos incorporados e referências data: inesperadas. Uma referência de rede pode afetar privacidade, disponibilidade ou política de conteúdo; JavaScript e eventos ativos não pertencem a um ícone estático não confiável. Bloquear uma etiqueta não substitui uma política de sanitização mantida nem testes no contexto real. Não cole SVG desconhecido diretamente em JSX ou HTML com permissões amplas. Se precisar apenas de mostrar um ficheiro não confiável, ofereça-o para transferência ou use isolamento apropriado.
Limites a testar antes de publicar
Não aplique alterações agressivas sem uma cópia quando o ficheiro contém animações SMIL ou CSS, filtros, máscaras complexas, fontes incorporadas, imagens incorporadas ou IDs consumidos por CSS ou JavaScript. Renomear IDs pode quebrar seletores, referências de script ou vários ícones inseridos numa página; remover uma fonte pode alterar medidas e quebras. Filtros podem variar entre navegadores e uma imagem data: pode explicar a maior parte do peso apesar de o XML ser pequeno. Verifique a saída nos navegadores suportados e meça o carregamento completo. Uma ilustração grande pode precisar de redesenho ou outro formato; segurança exige sanitização e revisão separadas. Os guias de otimização SVG e privacidade detalham estas decisões.