Optimitzar no és validar ni sanejar
Un SVG és XML que el navegador representa com a gràfic, però també pot contenir referències, estils i comportament. Treure espais, metadades de l'editor o grups redundants pot estalviar bytes sense decidir si el fitxer és adequat per a una pàgina. Separa tres preguntes: el document és XML vàlid, conserva el dibuix previst i és acceptable per al seu destí? Un optimitzador pot simplificar un camí o eliminar comentaris; un sanejador ha de decidir què fer amb script, controladors d'esdeveniments, enllaços externs, foreignObject o URL perilloses. Una sortida més petita no prova que sigui segura. Si l'SVG prové d'una altra persona, revisa'l amb una política de contingut i torna a obrir el resultat abans de publicar-lo.
Exemple controlat: compta elements DOM i bytes
Treballa sempre sobre una còpia. Parteix d'una icona senzilla amb dos grups imbricats, un títol útil, una descripció, metadades d'editor i quatre formes. Abans d'optimitzar, compta elements del DOM amb l'inspector o cerca les etiquetes svg, g, path, title i desc; anota també la mida en bytes. Executa l'optimitzador i compara les dues xifres. És raonable que desapareguin grups buits o metadades de l'editor, però un títol accessible no ha de desaparèixer sense un reemplaçament previst. Desa original i sortida amb noms diferents. La reducció només importa si la representació, el propòsit i les referències necessàries sobreviuen al canvi.
Confirma la representació, no només el marcatge
Obre l'original i la sortida amb la mateixa versió del navegador i, si la icona s'utilitza dins d'una interfície, prova-la també allí. Comprova contorn, farciment, traç, opacitat, viewBox, proporció i retalls en mides petites i grans. Fes zoom per detectar canvis de precisió en corbes o línies fines. Si l'SVG usa un ID per a un degradat, clipPath, màscara o marcador, inspecciona que cada url(#id) continuï apuntant a un ID existent. Una comparació visual ràpida pot amagar un error que només apareix en un fons fosc, amb zoom alt o amb un full CSS concret. Per a gràfics de producció, conserva una captura de referència o una prova visual repetible.
Conserva el significat accessible
Una icona decorativa es pot ocultar a les tecnologies d'assistència en el context on s'usa; un gràfic que comunica informació necessita un nom accessible o una alternativa equivalent. No eliminis title, desc, aria-label, aria-labelledby o text visible sense saber com s'exposarà el significat després. Comprova que aria-labelledby no anomeni IDs eliminats o reanomenats. El text alternatiu ha de descriure la funció, no la geometria interna: “Baixa l'informe” és més útil que “fletxa blava avall”. L'optimització pot reduir atributs repetits, però no ha de convertir una imatge comprensible en una imatge silenciosa. La guia de QR accessibles és útil si l'SVG forma part d'un codi que també necessita instruccions fora de la imatge.
Cerca contingut actiu o extern abans de confiar-hi
Inspecciona l'XML abans d'incrustar-lo. Senyals que requereixen revisió són script, atributs onload o altres on*, valors xlink:href o href cap a una altra URL, imatges externes, foreignObject, objectes incrustats i referències data: inesperades. Una referència de xarxa pot afectar privadesa, disponibilitat o política de contingut; JavaScript i esdeveniments actius no pertanyen a una icona estàtica no fiable. Bloquejar una etiqueta concreta no substitueix una política de sanejament mantinguda ni proves en el context real. No enganxis SVG desconegut directament a JSX o HTML amb permisos amplis. Si només has de mostrar un fitxer no fiable, ofereix-ne la descàrrega o utilitza un aïllament adequat.
Límits que cal provar abans de publicar
No apliquis ajustos agressius sense una còpia quan el fitxer conté animacions SMIL o CSS, filtres, màscares complexes, fonts incrustades, imatges incrustades o IDs consumits per CSS o JavaScript. Reanomenar IDs pot trencar selectors, referències de script o diverses icones en una mateixa pàgina; eliminar una font pot canviar mesures i salts. Els filtres poden variar entre navegadors i una imatge data: pot explicar gran part del pes encara que l'XML sigui petit. Comprova la sortida en els navegadors compatibles i mesura la càrrega completa. Una il·lustració gran pot requerir redisseny o un altre format; la seguretat necessita sanejament i revisió separats. La guia d'optimització SVG i la de privadesa desenvolupen aquestes decisions.