Súbor SVG je príliš veľký? 8 tipov na kompresiu a optimalizáciu

SVG, ktorý má stovky KB alebo dokonca niekoľko MB, je spravidla výsledkom nadmerného počtu kotievnych bodov, redundantných ciest, metadát editora a nadmernej desatinnej presnosti. Osem techník uvedených nižšie je zoradené od zdroja po odovzdanie a všetky sú praktické.

1. Na úrovni ciest: menej kotievnych bodov, zlúčené cesty

Tip 1: Znížte počet kotievnych bodov (zjednodušte cesty)

Čím viac kotievnych bodov má cesta, tým väčší je súbor a tým pomalšie vykresľovanie. Pri prevode zvýšte vyhladzovanie, aby ste kotievne body odstránili už pri zdroji. Pri existujúcom SVG použite Object → Path → Simplify v Illustratore alebo Path → Simplify (Ctrl+L) v Inkscape na odstránenie redundantných kotievnych bodov. Nastavením vyhladzovania a počtu farieb v prevodnom nástroji PolySVG môžete v reálnom čase vyvažovať kvalitu a veľkosť súboru.

Tip 2: Zlúčte cesty a vrstvy

Skombinujte viac ciest s rovnakou výplňou do jednej, aby ste odstránili opakované atribúty, zplošte zbytočné vnorenie skupín a odstránite skryté vrstvy a prázdne prvky. V grafickom programe použite operáciu unite nástroja pathfinder alebo pred exportom zlúčte vrstvy.

2. Vo vnútri súboru: odstránenie metadát a zníženie presnosti

Tip 3: Odstránte metadáta editora

SVG exportované z Illustratoru alebo Inkscape často obsahujú namespace-y editora, <metadata>, komentáre a nastavenia exportu, ktoré vykresľovanie neovplyvňujú, takže ich možno odstrániť ručne alebo ich automaticky vyčistí SVGO. Zachovajte však <title> a <desc>, ktoré pomáhajú prístupnosti.

Tip 4: Znížte desatinnú presnosť

Súradnice ciest majú často šesť až osem desatinných miest, kým vykresľovanie na obrazovke potrebuje jedno alebo dve. Nastavením floatPrecision na 1 alebo 2 v konfigurácii SVGO sa súbor viditeľne zmenší bez viditeľného rozdielu. Pri veľmi malých ikonách dávajte pozor, aby ste súradnice nestlačili príliš, inak sa tvar skrivení.

3. Automatizácia: jeden príkaz so SVGO

Tip 5: Optimalizujte automaticky pomocou SVGO

SVGO je de facto štandardný nástroj na optimalizáciu SVG a dodáva sa s desiatkami modulov: odstraňovanie komentárov a metadát, zlučovanie ciest, optimalizácia príkazov cesty a čistenie čísel. Základné použitie:

npx svgo input.svg -o output.svg

Typické súbory sa zmenšia o 30 – 70 %. Dve upozornenia: neodstraňujte atribút viewBox, inak sa rozbije škálovanie; a pri ikonách, ktoré chcete prefarbovať cez CSS, nechajte fill zdediť, namiesto pevne zapísanej farby.

Porovnajte veľkosť súboru a skutočnú prenosovú veľkosť v nástrojoch vývojára prehliadača pred optimalizáciou a po nej, aby ste potvrdili prínos. Naraz meníte iba jeden druh parametra, takže je ľahké zistiť, ktorý krok spôsobil problém.

4. Štruktúra a opätovné použitie: symboly a farebné vrstvy

Tip 6: Opakovane používajte tvary cez defs a use

Keď sa tá istá ikona objavuje na stránke viackrát, definujte ju raz pomocou <defs> a odkazujte na ňu cez <use>, alebo vytvorte SVG sprite sheet — veľkosť súboru aj počet požiadaviek klesnú naraz.

Tip 7: Ovládajte farebné vrstvy a vyhnite sa vloženým rastrom

Pri vektorizácii znížte počet farieb, aby ste obmedzili počet vrstiev, a všade, kde sa dá, použite jednofarebnú výplň namiesto zložitého gradientu. Najdôležitejšie: nevnášajte base64 rastrové obrázky dovnútra SVG — tým sa vektorový súbor premení na nosič rastru a veľkosť vystrelí z rukov. Zostávajúce cesty po prevode sa dajú odstrániť kliknutím v online editore.

5. Odovzdanie: kompresia prenosu a vyrovnávacia pamäť

Tip 8: Zapnite gzip/Brotli a cache

SVG je text, takže zapnutie gzip alebo Brotli na serveri zvyčajne zníži prenosovú veľkosť o ďalších 60 – 80 %; statickým súborom SVG priraďte dlhodobé hlavičky cache. Veľmi malé ikony možno vložiť priamo do HTML, čím sa úplne ušetrí jedna požiadavka. Princípy, na ktorých to stojí, popisuje sprievodca výhodami SVG; veľkosť na úrovni prevodu vám pomôže ovládnuť sprievodca spôsobmi premeny obrázka na SVG.

Poradie je dôležité: kotievne body a farebné vrstvy ovládajte pri zdroji, vo vnútri súboru vyčistite metadáta a presnosť, potom spustite SVGO a napokon zapnite kompresiu prenosu. So všetkými štyrmi vrstvami na mieste sa súbory SVG zvyčajne zmenšia o poriad veľkosti.