Původně vyšlo na blogu VzhůruDolů.cz. Použití SVG si můžete vyzkoušet na autorově školení Dnešní webový frontend.

Nezdá se to, ale SVG (Scalable Vector Graphics) je prastarý vektorový formát, jehož první standard pochází z roku 2001.

Jeho širšímu uplatnění dlouho bránil Microsoft, který pomocí Internet Exploreru až do verze 8 razil vlastní formát VML. S klesajícími podíly starších IE mizí i důvody, proč webaři SVG zatím moc nevyužívali.

Proč SVG používat?

Akutním důvodem je hlavně nástup vysokokapacitních displejů typu Retina a s tím spojené problémy při práci s bitmapovými obrázky. Vektorové SVG tady získává body díky nezávislosti na rozlišení.

Mrkněme na další výhody. Z názvu a formátu plyne možnost obrázek v rozhraní webu libovolně zmenšovat i zvětšovat, aniž by ztrácel vizuální kvalitu. Kromě toho je SVG obvykle výrazně datově úspornější, což se zase hodí na dnešních pomalých mobilních připojeních. Obsah je strojově čitelný a Google jej proto umí indexovat. Formát má navíc velmi širokou škálu využití – od jednoduchých vektorových ikonek nebo logotypů až po stylování vzhledu pomocí CSS nebo složitější filtry, interakce či animace.

Nevýhodou je zejména nutnost u většiny webů vytvářet alternativní řešení pro Internet Explorer do verze 8 a Android Browser do verze 2.3. Složité SVG je výkonnostně náročné, na to je potřeba dávat pozor u levnějších mobilních zařízení.

SVG se na webech hodí především pro ikony, logotypy nebo dekorativní prvky stránky — například vlastní styly tlačítek, které nelze vytvořit pomocí CSS.

Detekce SVG v prohlížečích

Ačkoliv se Modernizr tváří, že SVG detekovat umí, nejspolehlivější detekci nabízí javascriptová metoda s detekcí pomocí document.implementation.hasFeature. Tady je kód, který jakmile zjistí, že prohlížeč SVG neumí, přidá k dokumentu třídu .no-svg. Ta se nám bude hodit v CSS.

if (!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {
    document.documentElement.className = "no-svg";
}

Alternativou k přidání třídy může samozřejmě být jakákoliv jiná operace, kterou chceme v prohlížečích bez podpory SVG udělat.

SVG jako obrázek na pozadí v CSS

Vybavení kouskem javascriptu, který nám přidává třídu, teď můžeme vyrobit SVG ikonku s fallbackem do PNG:

.icon {
    background-image: url('icon.svg');
}

.no-svg .icon {
    background-image: url('icon.png');
}

Příklad s SVG v CSS na CodePenu: http://cdpn.io/e/FEzcI

SVG v HTML jako <img>

Znám dvě možnosti fallbacku v HTML. V první počkáte na spuštění události onerror. To znamená na chvíli kdy prohlížeč bez podpory stáhne SVG obrázek a zjistí, že s ním neumí nic udělat. Teď ho poprosíte o stažení PNG alternativy:

<img src="icon.svg"
    onerror="this.onerror=null; this.src='icon.png'"
    width="100" height="100" alt="…">

Ve druhé variantě se v HTML tváříte, že SVG zvládají všechny prohlížeče —

<img src="logo.svg" width="100" height="100" alt="…">

— a v javascriptovém kódu obstaráte výměnu koncovky souboru v src v momentě, kdy zjistíte, že prohlížeč vektorový formát nezvládne:

if (!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {
         $('img[src*="svg"]').attr('src', function() {
                return $(this).attr('src')
                    .replace('.svg', '.png');
        });
}

Příklad s SVG v HTML na CodePenu: http://cdpn.io/e/isrIB

V prohlížečích bez podpory to vždy bude pomalejší

Bystrému čtenáři neuniklo, že IE8 a další v případě použití uvnitř HTML stáhne nejdříve SVG, vyděsí se, vyhodí onerror a pak teprve stahuje PNG.

V případě použití SVG v CSS je to trochu lepší – SVG se začnou stahovat, ale requesty prohlížeč zruší a po chvíli začne stahovat PNG alternativy.

Ve starších prohlížečích bude tedy načítání stránky vždy o něco pomalejší. Navíc je fallback závislý na javascriptu. Nezapomínejte na to, až budete zvažovat použití SVG pro vaše stránky.

Pojďme v téhle souvislosti zmínit dobrou alternativu k SVG – ikonfonty. Ty mají daleko lepší podporu v prohlížečích, ale všechny ostatní parametry mluví pro SVG. Podívejte se na srovnání na Crise Coyiera. Někde bude výhodnější použití ikonfontů, někde SVG.

Jak SVG získat

Grafik webu vám nepřipravuje podklady ve vektorech? Hned za ním utíkejte a citlivě mu oznamte, že od příštího projektu to jinak nepůjde.

Pokud si připravujete podklady sami, na internetech se povaluje spousta kvalitních ikonek. V aplikacích pro jejich správu (Icomoon, Fontastic) je možné vybrat si SVG export rovnou s PNG alternativami.

SVG si můžete samozřejmě editovat sami. Kromě obligátního Illustratoru je populární Inkscape a řada dalších nástrojů. Já třeba na Macu používám iDraw:

Jak generovat PNG alternativy

Možností je hodně. Od ruční konverze pomocí editoru nebo online nástrojů po generátory celého fallback systému, jako je Grumpicon.

Pokud v projektu máte mnoho SVG souborů nebo se často mění, hodí se SVG workflow automatizovat pomocí Gruntu. Tasků pro práci s SVG nabízí fakt hodně – svg2png, svgmin nebo Grunt varianta Grumpicon, Grunticon.