Komprimujte soubory SVG

SVG je kód, ne pixely

Soubor SVG (Scalable Vector Graphics) je textový dokument v XML, který popisuje tvary: cesty, kruhy, přechody, text. Protože obsahuje instrukce místo pixelů, zůstane ostrý v jakékoli velikosti, od favikony o 16 pixelech po billboard. Ikony, loga, ilustrace, grafy a mapy na webu jsou často ve formátu SVG, který je standardem W3C od roku 2001.

To, že jde o text, má vedlejší efekt: velikost souboru závisí na tom, jak rozvláčně ho editor zapsal, a ne na tom, jak velký je obrázek zobrazený. Dva soubory SVG, které se vykreslí stejně, se mohou velikostí lišit i několikanásobně.

Co dělá soubory SVG těžší, než je nutné

• Metadata editoru. Illustrator, Inkscape, Figma a Sketch přidávají vlastní jmenné prostory, názvy vrstev, komentáře z exportu a někdy i vloženou kopii upravitelného dokumentu.
• Zbytečná přesnost. Souřadnice jako 12.483920174 tam, kde se 12.48 vykreslí v jakékoli realistické velikosti úplně stejně.
• Nadbytečná struktura. Prázdné skupiny, skryté vrstvy, výchozí hodnoty atributů, nepoužité definice a styly, které by mohly být kratší.
• Dlouhý zápis cest. Absolutní příkazy tam, kde by relativní byly kratší, opakovaná písmena příkazů, zbytečné mezery.
• Vložené bitmapy. Fotka vložená do ilustrace se ukládá jako text Base64 uvnitř SVG, který je asi o třetinu větší než původní soubor obrázku.

Jak nástroj optimalizuje SVG

Nástroj spouští ve vašem prohlížeči SVGO, široce používaný open-source optimalizátor SVG. Odstraní metadata a komentáře, sloučí zbytečné skupiny, zkrátí data cest, zaokrouhlí čísla ve výchozím nastavení na 3 desetinná místa (můžete zvolit 0 až 6) a sloučí styly, přičemž průchody opakuje, dokud se nic nemění. Výsledkem je stále běžné SVG, které otevřete v jakémkoli editoru nebo vložíte do HTML. V našich testech na osmi souborech SVG, od ručně optimalizovaných ikon po export z Inkscapu plný dat editoru, se úspora pohybovala od 8 % do 42 %.

Optimalizace je v úzkém smyslu technicky ztrátová: zaokrouhlení změní souřadnice o nepatrné hodnoty a data specifická pro editor zmizí, takže soubor už neotevřete se všemi původními vrstvami. Zdrojový soubor z grafického nástroje si ponechte a optimalizované SVG berte jako verzi ke zveřejnění.

Servery obvykle posílají SVG s kompresí gzip nebo Brotli, která text cestou do prohlížeče znovu zmenší. Optimalizace a komprese na serveru se sčítají, protože odstraněná data se už nikdy komprimovat nemusí.

Když se optimalizované SVG rozbije

• CSS nebo JavaScript už nenajde prvek. Optimalizátory zkracují nebo odstraňují ID a názvy tříd, které uvnitř souboru vypadají jako nepoužité. Pokud na ně míří styly nebo skripty vaší stránky, zkontrolujte výsledek před zveřejněním.
• Ikona se už neškáluje. SVG potřebuje ke správné změně velikosti atribut viewBox. Nástroj ho zachová, takže zkontrolujte, jestli ho originál měl; SVG jen s pevnou šířkou a výškou se nikdy dobře neškálovalo.
• Drobné tvary vypadají zkresleně. Velmi malé ikony nakreslené na velkém plátně mohou zaokrouhlením utrpět. S výchozí přesností se to stává zřídka.
• Soubor je převážně vložená fotka. Vyexportujte fotku jako samostatný JPG nebo WebP a odkažte na ni, nebo celou grafiku převeďte na bitmapu.

Otázky k SVG

Související stránky

Bitmapové obrázky zpracuje kompresor obrázků. Co běží přímo v zařízení a proč, se dozvíte na stránce Jak to funguje.