Els SVG que surten d’Illustrator, Figma o Inkscape arrosseguen molta cosa que el navegador no necessita: comentaris de l’editor, blocs de metadades, atributs propietaris, identificadors generats i coordenades amb dotze decimals.
Aquesta pàgina hi passa SVGO amb la configuració per defecte més unes quantes opcions que val la pena poder tocar. En icones exportades d’un editor és habitual retallar entre el 40 i el 70 % del pes sense que canviï ni un píxel del dibuix.
Com es fa servir
- Arrossega-hi els SVG, tants com vulguis.
- Ajusta els decimals dels camins si necessites més o menys precisió.
- Processa i mira quant ha baixat cadascun abans de descarregar.
Preguntes freqüents
- Quants decimals he de deixar als camins?
- Tres va bé per a gairebé tot. Amb icones petites pots baixar a un o dos i estalviar encara més; si el dibuix té corbes llargues i suaus, baixar-hi massa pot fer aparèixer angles visibles.
- Per què hi ha l’opció de treure width i height?
- Perquè una icona que ha d’escalar amb CSS va millor només amb viewBox: sense mides fixes, ocupa el que li digui el contenidor. Si en canvi inserixes l’SVG solt en una pàgina, deixa-les.
- Què fa el prefix dels identificadors?
- Hi afegeix el nom del fitxer al davant. Si poses diversos SVG a la mateixa pàgina i tots tenen un degradat anomenat "a", es trepitgen entre ells; amb el prefix, cadascun manté el seu.
- Es pot desfer?
- No des d’aquí, així que conserva els originals. L’optimització no és destructiva per al dibuix, però sí per a l’estructura editable amb què treballa el teu programa de disseny.