SVG: Optimalizace a použití v CSS

V dnešním článku se podíváme na to, jak co možná nejlépe připravit SVG obrázek pro použití v CSS stylech na webu. Ukážeme si jaké nástroje na to použít a jaké problémy nás můžou čekat.

Příprava obrázku

Jako první musíme kód SVG obrázku zjednodušit a upravit do jednoho řádku. Na tuto akci můžeme použít nástroj SVGO. Tento nástroj udělá většinu práce za nás.

SVGO nástroj pro optimalizaci SVG ikony.

Z tohoto nástroje získáme krásně optimalizovaný zdrojový kód, který v našem případě vypadá takto:

Optimalizované SVG

Styly

Dle mé zkušenosti je nejlepší vkládat SVG obrázek jako inline data pro url v background pravidle. Díky tomuto způsobu nebude potřeba nějaká další složka s assety a také se nám zrychlí načítání stránky, jelikož prohlížeč stahuje pouze jeden stylový soubor. Formát takového zápisu pro SVG vypadá takto:

Formát pro inline SVG

Výše popsané funguje ve všech moderních prohlížečích mimo IE a MS Edge. Pro tyto prohlížeče je potřeba provést s inline SVG url decode. Také kompletní URL pozadí musí být v uvozovkách (nikoliv apostrofy). Pro správný url decode lze použít URL Decoder/Encoder.

Takto upravený zdroj ikony bude nyní validní pro prohlížeče IE a MS Edge.

Výsledek

Na konci tohoto postupu získáme funkční a optimalizovaný asset do stylů bez potřeby existence nějakého dalšího souboru.

Finální ošetřený zápis pro embedovanou SVG ikonu.
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.