Fișierul SVG este prea mare? 8 sfaturi de comprimare și optimizare

Un SVG care cântărește sute de KB sau chiar câțiva MB rezultă de obicei din prea multe puncte de ancorare, trasee redundante, metadate de editor și precizie zecimală excesivă. Cele opt tehnici de mai jos sunt ordonate de la sursă la livrare, iar toate sunt practice.

1. La nivel de traseu: mai puține puncte de ancorare, trasee unite

Tipul 1: Reduceți punctele de ancorare (simplificați traseele)

Cu cât mai multe puncte de ancorare are un traseu, cu atât fișierul este mai mare și randarea mai lentă. Creșteți netezirea la conversie pentru a tăia punctele de ancorare de la sursă. Pentru un SVG existent, folosiți Object → Path → Simplify din Illustrator sau Path → Simplify (Ctrl+L) din Inkscape pentru a elimina punctele de ancorare redundante. Ajustarea netezirii și a numărului de culori în instrumentul de conversie PolySVG vă permite să măsurați în timp real calitatea față de dimensiunea fișierului.

Tipul 2: Uniți traseele și straturile

Combinați mai multe trasee cu aceeași umplere într-unul singur, pentru a elimina atributele repetate, aplatizați imbricarea inutilă de grupuri și ștergeți straturile ascunse și elementele goale. În software-ul de design, folosiți operația unite a pathfinder sau uniți straturile înainte de export.

2. În interiorul fișierului: eliminați metadatele, reduceți precizia

Tipul 3: Eliminați metadatele editorului

SVG-urile exportate de Illustrator sau Inkscape conțin adesea namespace-uri de editor, <metadata>, comentarii și setări de export care nu influențează randarea, deci pot fi eliminate manual sau curățate automat de SVGO. Păstrați însă <title> și <desc>, care ajută la accesibilitate.

Tipul 4: Reduceți precizia zecimală

Coordonatele traseelor au adesea șase până la opt zecimale, în timp ce randarea pe ecran are nevoie de unul sau două. Setarea floatPrecision la 1 sau 2 în configurația SVGO micșorează vizibil fișierul, fără nicio diferență aparentă. Pentru iconițele foarte mici, aveți grijă să nu comprimați prea mult coordonatele, altfel forma se deformează.

3. Automatizare: o singură comandă cu SVGO

Tipul 5: Optimizați automat cu SVGO

SVGO este instrumentul de facto pentru optimizarea SVG-ului și vine cu zeci de module: eliminarea comentariilor și metadatelor, unirea traseelor, optimizarea comenzilor de traseu și curățarea numerelor. Utilizare de bază:

npx svgo input.svg -o output.svg

Fișierele tipice se micșorează cu 30%-70%. Două atenționări: nu eliminați atributul viewBox, sau scalarea se va strica; și pentru iconițele pe care vreți să le recolorați cu CSS, păstrați fill-ul moștenit în loc să codificați culoră în mod fix.

Comparați dimensiunea fișierului și dimensiunea reală transferată în instrumentele de dezvoltator ale browserului, înainte și după optimizare, ca să confirmați câștigul. Modificați un singur tip de parametru pe rând, ceea ce face ușoară localizarea pasului care a introdus o problemă.

4. Structură și reutilizare: symbol-uri și straturi de culoare

Tipul 6: Reutilizați formele repetate cu defs și use

Când aceeași iconiță apare de mai multe ori pe o pagină, definiți-o o dată cu <defs> și referiți-o cu <use>, sau construiți o foaie de sprite-uri SVG, iar dimensiunea fișierului și numărul de cereri scad împreună.

Tipul 7: Controlați straturile de culoare și evitați bitmapurile încorporate

Reduceți numărul de culori la vectorizare, pentru a micșora numărul de straturi, și folosiți o culoare uniformă în locul unui degradeu complex, unde este posibil. Mai presus de toate, evitați încorporarea de bitmapuri base64 în interiorul unui SVG — aceasta transformă un fișier vectorial într-un purtător de bitmap, iar dimensiunea scapă de sub control. Traseele rămase de la conversie pot fi șterse cu un clic în editorul online.

5. Livrare: comprimarea transportului și cache-ul

Tipul 8: Activați gzip/Brotli și cache-ul

SVG este text, deci activarea gzip sau Brotli pe server reduce de obicei dimensiunea transferată cu încă 60%-80%; oferiți fișierelor SVG statice anteturi de cache de lungă durată. Iconițele foarte mici pot fi încorporate direct în HTML, ceea ce economisește complet o cerere. Principiile din spatele acestora sunt acoperite în Avantajele SVG-ului; iar pentru a controla dimensiunea la etapa conversiei, citiți Modurile de a converti o imagine în SVG.

Ordinea contează: controlați punctele de ancorare și straturile de culoare la sursă, curățați metadatele și precizia în interiorul fișierului, apoi rulați SVGO și, la final, activați comprimarea transportului. Cu toate cele patru straturi în loc, fișierele SVG se micșorează de obicei cu un ordin de mărime.