Com optimitzar SVG sense perdre seguretat ni accessibilitat
Un SVG és text, i per això és fàcil pensar que optimitzar-lo vol dir treure espais. També és un format gràfic que pot conservar metadades, noms accessibles, estils i referències. Reduir-lo bé significa disminuir bytes sense alterar el dibuix, el seu propòsit ni la manera prevista de lliurar-lo. Aquesta guia parteix d'una icona sintètica; no estableix que una configuració d'optimització sigui correcta per a qualsevol fitxer.
El problema
El pes acostuma a venir de l'estructura que deixa una eina de disseny: grups niats sense transformació, atributs repetits, capes invisibles, comentaris i metadades. Que el navegador ho pugui dibuixar no vol dir que calgui conservar-ho. Cada element afegeix bytes i amplia allò que s'ha de revisar. Treure un grup només és segur després de comprovar que no aporta transformació, retall, estil heretat o una referència necessària. Treure un títol requereix saber si era l'únic nom d'una imatge informativa.
Seguretat i compressió no són sinònims. SVG 2 descriu un llenguatge ampli i un actiu d'origen desconegut pot incloure recursos externs, enllaços, atributs d'esdeveniment, scripts, filtres o imatges. Que una forma d'incrustar-lo no mostri cap problema no fa que aquestes capacitats siguin adequades per a un actiu públic. L'optimitzador canvia sintaxi; una política d'actius decideix quines característiques són acceptables per al producte.
L'accessibilitat és una altra restricció. Una icona decorativa s'ha d'ocultar correctament des del component. Una imatge informativa necessita un equivalent textual que comuniqui el seu propòsit. Un title pot participar en alguns patrons, però no substitueix sempre l'alternativa d'una imatge, un peu de figura o el nom d'un control. Eliminar-lo per estalviar uns bytes pot deixar un estat o una acció sense explicació per a persones que no veuen el gràfic.
Exemple pràctic
Utilitza un exemple petit i inventat, mai un logotip o dades reals. Aquest fitxer de prova porta dos grups redundants, metadades, un títol útil i una referència externa sospitosa. El codi és per inspeccionar-lo, no per publicar-ne les parts que s'han de rebutjar.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" role="img" aria-labelledby="estat-titol">
<title id="estat-titol">Càrrega completada</title>
<metadata>Exportat en una màquina de prova</metadata>
<g><g fill="#1d9bf0"><circle cx="24" cy="24" r="20" /></g></g>
<g><path fill="#fff" d="M22 12h4v16h6l-8 8-8-8h6z" /></g>
<image href="https://example.invalid/tracker.png" width="1" height="1" />
</svg>
Per a una icona local i autosuficient, la sortida revisada pot mantenir viewBox, cercle, traçat i títol significatiu, i eliminar metadades, agrupacions buides i la imatge externa. Els blocs exactes d'aquesta pàgina ocupen 421 i 267 bytes, respectivament: UTF-8 sense BOM, salts LF i un salt final. Són mides del codi mostrat, no una promesa de compressió. Cal comparar els dos resultats a les mides reals: cercle, fletxa, colors, escala i nom accessible. La diferència de mida no prova per si mateixa que la representació sigui equivalent.
Aquesta és la sortida revisada manualment. Desa els dos blocs com a before.svg i after.svg respectant aquests salts; comprova'n les mides amb l'ordre següent. No carreguis la referència externa de l'original.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" role="img" aria-labelledby="estat-titol">
<title id="estat-titol">Càrrega completada</title>
<circle fill="#1d9bf0" cx="24" cy="24" r="20" />
<path fill="#fff" d="M22 12h4v16h6l-8 8-8-8h6z" />
</svg>
node -e "const fs = require('node:fs'); for (const p of ['before.svg', 'after.svg']) console.log(p, fs.readFileSync(p).byteLength);"
Procediment
Fes una còpia immutable i apunta on s'utilitza l'actiu. Classifica'l com a decoratiu, informatiu o interactiu. Si és decoratiu, el component ha d'aportar la semàntica d'ocultació. Si és informatiu, decideix abans quin text equivalent tindrà. Si és una icona dins d'un botó, el botó necessita un nom accessible propi i el gràfic no l'ha de duplicar.
Inspecciona el text abans de convertir-lo. Fes inventari d'arrel SVG, formes, grups, definicions, reutilitzacions, degradats, text, enllaços, imatges, estils, metadades, identificadors i atributs d'accessibilitat. Una URL externa, un script, un atribut d'esdeveniment o un element desconegut són troballes de revisió. Si el producte no els necessita, elimina'ls o rebutja el fitxer amb una norma explícita. Si necessita un degradat local o un retall, conserva una mostra que demostri que la sortida transformada continua funcionant.
Executa una optimització conservadora sobre la còpia i revisa el diff textual. Assegura't que viewBox continua existint quan el CSS escala la icona; retirar dimensions no és igual que retirar el sistema de coordenades. Comprova que els ID de aria-labelledby, url(#degradat), clip-path o use encara coincideixen. No converteixis automàticament text en traçats si s'ha de seleccionar, traduir o llegir com a text.
Prova el resultat en la mateixa ruta de lliurament de la web. Obrir el fitxer directament només és un control; també cal renderitzar-lo en el component, amb fons clars i foscos si cal, a mides estretes i amples i amb zoom. Revisa l'arbre d'accessibilitat i el focus de teclat si és interactiu. Una captura de referència ajuda a veure canvis de retall, degradat o posició. Guarda l'original quan calgui editar-lo, comprovar-ne la llicència o investigar una regressió.
Explicació tècnica
SVG és un format vectorial basat en XML, però el seu comportament depèn de la incrustació. Un recurs carregat com a imatge no és necessàriament igual que marcat SVG inserit al document. Herència CSS, permisos de script, regles d'origen i exposició a tecnologia assistiva varien amb el context i el navegador. Per això que es vegi bé en una pestanya no prova que es comporti igual després d'optimitzar-lo, inserir-lo o servir-lo sota una altra política de contingut.
Els grups redundants solen existir perquè un editor conserva capes. Un grup sense transformació, estil, retall ni propòsit pot desaparèixer. Es poden concentrar estils iguals i escurçar decimals amb una tolerància visual. Aquests canvis intenten conservar la pintura. En canvi, retirar una transformació mou coordenades, canviar una regla de farciment altera zones pintades i esborrar una definició trenca una referència llunyana. Cal classificar els canvis per risc, no per la seva aparença petita.
El nom accessible també és una xarxa de referències. Si aria-labelledby apunta a un ID que un procés reanomena o elimina, el gràfic queda sense etiqueta. Si el context ja ofereix un text alternatiu precís, un títol intern pot ser redundant. La resposta correcta depèn del patró concret, no de regles universals com conservar tots els títols. WCAG demana un propòsit equivalent; la tècnica pertany al component i al contingut.
Errors freqüents
Un error freqüent és descarregar un actiu d'un catàleg, reduir-ne el pes i assumir que ja és segur. Treure metadades no elimina necessàriament referències, esdeveniments ni altres capacitats actives. També és un error permetre-ho tot perquè un exemple no mostra un problema visible. Una referència invisible pot crear una petició, el comportament pot canviar i un ús futur en línia pot exposar una situació diferent. Defineix una llista curta de característiques permeses i estudia les excepcions.
Eliminar viewBox i mantenir només píxels també falla: pot semblar correcte a la mida exportada i retallar-se quan el CSS l'escala. Netejar ID pot trencar degradats, màscares, retalls i etiquetes. Aquestes incidències poden aparèixer només en una ruta o mida concreta, i per això revisar el fitxer aïllat no és suficient. Tampoc mesuris l'èxit només en bytes: traçar text pot perjudicar selecció i traducció; retirar un títol pot fer una icona opaca; substituir un filtre pot modificar el contrast.
Consideracions
Defineix el límit d'actius abans d'acceptar fitxers. Per a una icona d'interfície pot incloure arrel SVG, formes bàsiques, traçats, definicions locals i atributs accessibles revisats, i excloure recursos externs i elements relacionats amb scripts. Una il·lustració o visualització pot necessitar degradats, retalls, text i més ID. L'important és que les característiques permeses responguin a una necessitat real i es provin, no que siguin les que ha deixat l'exportador.
Fes el procés reproduïble: desa la font, configuració o versió de l'eina, sortida i una llista d'acceptació. Si una automatització canvia SVG, la revisió hauria de veure el diff i un resultat visual. Això és útil en icones compartides, perquè una petita regressió d'ID pot afectar moltes pàgines. Els metadades poden revelar editor, ruta o versió; les referències externes poden revelar visites. Eliminar-les pot ser correcte, però no permet afirmar que qualsevol SVG resultant sigui privat o segur.
Limitacions
Cap guia genèrica certifica que un SVG arbitrari sigui segur, accessible o idèntic visualment. Navegador, forma d'incrustació, política de contingut i tecnologia assistiva condicionen el resultat. Una comparació visual pot no detectar fonts, animació, filtres o gestió de color. Una norma bona per a icones estàtiques pot ser massa estricta per a gràfics o massa permissiva per a càrregues d'usuaris.
Aquesta guia no substitueix una revisió de seguretat de contingut no confiable, una revisió de llicència ni proves professionals d'accessibilitat. Tampoc promet que un percentatge de reducció millori el rendiment de pàgina: compressió de transferència, memòria cau, dimensions i ús per ruta influeixen. Prova l'actiu real i conserva una manera segura de tornar a l'original.
Llista de comprovació
Classifica l'SVG abans de modificar-lo. Treballa en una còpia i inspecciona elements, referències, ID, metadades i atributs de nom. Rebutja o elimina scripts, esdeveniments i recursos externs fora de la política. Conserva viewBox i cada referència necessària per a degradats, retalls, reutilització o etiquetes. Optimitza amb prudència, revisa el diff, compara mida i renderitza en el component final. Comprova el nom accessible en context, desa font i configuració, i mantén un original provat per revertir.