Comprimați fișiere SVG

SVG este cod, nu pixeli

Un fișier SVG (Scalable Vector Graphics) este un document text în XML care descrie forme: trasee, cercuri, degradeuri, text. Pentru că se compune din instrucțiuni în loc de pixeli, rămâne clar la orice dimensiune, de la un favicon de 16 pixeli până la un panou publicitar. Pictogramele, logourile, ilustrațiile, graficele și hărțile de pe web sunt adesea SVG, iar formatul este standard W3C din 2001.

Faptul că este text are un efect secundar: dimensiunea fișierului depinde de cât de prolix l-a scris editorul, nu de cât de mare este afișată imaginea. Două SVG-uri care arată identic pot diferi ca dimensiune de câteva ori.

Ce face fișierele SVG mai grele decât e nevoie

• Metadatele editorului. Illustrator, Inkscape, Figma și Sketch adaugă propriile spații de nume, numele straturilor, comentarii de export și uneori o copie încorporată a documentului editabil.
• Precizie excesivă. Coordonate precum 12.483920174 acolo unde 12.48 se afișează exact la fel la orice dimensiune realistă.
• Structură redundantă. Grupuri goale, straturi ascunse, valori implicite ale atributelor, definiții nefolosite și stiluri care ar putea fi mai scurte.
• Sintaxă lungă a traseelor. Comenzi absolute acolo unde cele relative sunt mai scurte, litere de comandă repetate, spații inutile.
• Imagini bitmap încorporate. O fotografie lipită într-o ilustrație este stocată ca text Base64 în SVG, care este cu circa o treime mai mare decât fișierul imagine original.

Cum optimizează instrumentul SVG-urile

Instrumentul rulează în browser SVGO, optimizatorul SVG open-source folosit pe scară largă. Elimină metadatele și comentariile, restrânge grupurile inutile, scurtează datele traseelor, rotunjește numerele implicit la 3 zecimale (puteți alege între 0 și 6) și unește stilurile, repetând trecerile până când nu se mai schimbă nimic. Rezultatul este tot un SVG obișnuit, pe care îl puteți deschide în orice editor sau lipi în HTML. În testele noastre pe opt SVG-uri, de la pictograme optimizate manual până la un export Inkscape plin de date ale editorului, economiile au variat între 8% și 42%.

Tehnic, optimizarea este cu pierderi într-un sens restrâns: rotunjirea modifică puțin coordonatele, iar datele specifice editorului dispar, așa că nu mai puteți redeschide fișierul cu toate straturile originale. Păstrați fișierul sursă din programul de design și tratați SVG-ul optimizat drept versiunea publicată.

Serverele trimit de obicei SVG-urile cu compresie gzip sau Brotli, care micșorează din nou textul pe drumul spre browser. Optimizarea și compresia serverului se adună, pentru că datele eliminate nu mai trebuie comprimate deloc.

Când un SVG optimizat nu mai funcționează

• CSS-ul sau JavaScript-ul nu mai găsește un element. Optimizatoarele scurtează sau elimină ID-urile și numele de clase care par nefolosite în fișier. Dacă stilurile sau scripturile paginii le folosesc, verificați rezultatul înainte de publicare.
• Pictograma nu se mai scalează. Un SVG are nevoie de atributul viewBox pentru a se redimensiona corect. Instrumentul îl păstrează, așa că verificați dacă originalul îl avea; un SVG doar cu lățime și înălțime fixe nu s-a scalat niciodată bine.
• Formele foarte mici arată deformat. Pictogramele foarte mici desenate pe o planșă mare pot avea de suferit din cauza rotunjirii. La precizia implicită, acest lucru este rar.
• Fișierul este în mare parte o fotografie încorporată. Exportați fotografia separat ca JPG sau WebP și legați-o, sau convertiți întreaga grafică într-un bitmap.

Întrebări despre SVG

Pagini înrudite

Imaginile bitmap sunt procesate de compresorul de imagini. Pentru detalii despre ce rulează local și de ce, vedeți pagina cum funcționează.