Soubor SVG je příliš velký? 8 tipů na kompresi a optimalizaci

SVG, který váží stovky kB nebo i několik MB, bývá důsledkem příliš mnoha kotev, nadbytečných cest, metadat z editoru a zbytečně vysoké přesnosti desetinných míst. Níže uvedených 8 tipů je seřazeno podle pořadí „od zdroje po předání“ a všechny se dají reálně použít.

1. Úroveň cest: méně kotev, slučení cest

Tip 1: omezte počet kotev (zjednodušte cesty)

Čím více kotev má cesta, tím větší je soubor a tím pomalejší vykreslování. Při převodu mírně zvyšte vyhlazení a omezte kotev už ve zdroji; u existujícího SVG použijte v Illustratoru „Objekt → Cesta → Zjednodušit“ nebo v Inkscape „Cesta → Zjednodušit“ (Ctrl+L) a odstraňte nadbytečné kotvy. Úpravou vyhlazení a počtu barev v konverzním nástroji PolySVG můžete v reálném čase vážit kvalitu proti objemu souboru.

Tip 2: slučujte cesty a vrstvy

Slučte více cest se stejnou výplní do jedné, abyste odstranili opakující se atributy, zplošťte bezúčelné vnoření skupin a odstraňte skryté vrstvy i prázdné prvky. V grafických programech k tomu slouží funkce sjednocení v nástroji cest nebo sloučení vrstev před exportem.

2. Obsah souboru: odstraňte metadata, snižte přesnost

Tip 3: odstraňte metadata z editoru

SVG exportované z Illustratoru nebo Inkscape často obsahuje jmenné prostory editoru, <metadata>, komentáře a nastavení exportu, které vykreslování neovlivňují, takže je lze odstranit ručně nebo nechat uklízit SVGO. Zachovejte ale <title> a <desc> — pomáhají přístupnosti.

Tip 4: snižte přesnost desetinných míst

Souřadnice cest mívají šest až osm desetinných míst, zatímco pro vykreslení na obrazovce stačí jedno až dvě. Když v konfiguraci SVGO nastavíte přesnost čísel (floatPrecision) na 1–2, soubor se viditelně zmenší bez jakéhokoli rozdílu. U velmi malých ikon pozor, abyste souřadnice nestlačili příliš a grafika se nedeformovala.

3. Automatizace: komprese jedním příkazem se SVGO

Tip 5: optimalizujte automaticky pomocí SVGO

SVGO je de facto standardní nástroj pro optimalizaci SVG a má zabudovaných desítky pluginů: odstraňování komentářů a metadat, slučování cest, optimalizaci příkazů cest a uklízění čísel. Základní použití:

npx svgo input.svg -o output.svg

Běžné soubory se zmenší o 30–70 %. Na dvě věci pozor: neodstraňujte atribut viewBox, jinak se rozbije škálování; a u ikon, které chcete přebarvovat přes CSS, ponechte barvu děděnou, nikoli zapsanou napevno.

Porovnejte velikost souboru a skutečnou přenášenou velikost v nástrojích pro vývojáře v prohlížeči před optimalizací a po ní, abyste si potvrdili přínos; měňte vždy jen jeden druh parametrů, takže případný problém snadno lokalizujete.

4. Struktura a znovupoužití: symboly a počet vrstev

Tip 6: opakované tvary znovupoužívejte pomocí defs a use

Když se na stránce opakuje stejná ikona, definujte ji jednou pomocí <defs> a odkazujte na ni vícekrát pomocí <use>, nebo sestavte SVG sprite sheet — objem souboru i počet požadavků klesnou společně.

Tip 7: hlídejte počet barevných vrstev a vyhněte se vloženým bitmapám

Při vektorizaci snižte počet barev, abyste omezili počet vrstev, a všude, kde to jde, použijte jednobarevný výplň místo složitého přechodu. Především se vyhněte vkládání bitmap v base64 do SVG — tím by se vektorový soubor změnil v nosič bitmap a objem by vystřelil. Zbylé nečisté cesty po převodu lze kliknutím odstranit v online editoru.

5. Předání: komprese při přenosu a mezipaměť

Tip 8: zapněte gzip/Brotli a nastavte mezipaměť

SVG je text, takže zapnutí gzip nebo Brotli na serveru obvykle zkrátí přenášený objem ještě o 60–80 %; statickým souborům SVG přidělte dlouhé hlavičky mezipaměti. Velmi malé ikony lze vložit přímo do HTML, čímž ušetříte požadavek. Princip je popsán v výhodách SVG; chcete-li objem řídit už ve fázi převodu, přečtěte způsoby převodu obrázku na SVG.

Pořadí je důležité: nejprve omezte kotev a počet vrstev ve zdroji, pak uklízte metadata a přesnost v souboru, následně spusťte SVGO a nakonec zapněte kompresi při přenosu. Při všech čtyřech vrstvách se objem SVG běžně zmenší o řád.