Přejít k navigační liště

Zdroják » Webdesign » SVG pro webaře

SVG pro webaře

Články Webdesign

Proč SVG používat? Jak detekovat jeho podporu v prohlížečích? Čím ho generovat? To vše v dnešním článku.

Nálepky:

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:

SVG v 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.

Komentáře

Subscribe
Upozornit na
guest
12 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
pavel

Fajn, ze tu clanek vysel, SVG se pouziva stale malo navzdory sve jednoduchosti a prirozenosti pro prostredi webu.
Divim se, ze clanek nezminuje inlinovani, kdy je SVG vlozeno do (X)HTML.

<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>

Dale by stalo zminit plugin do JQuery-SVG: http://keith-wood.name/svg.html

fczbkk

Veľmi užitočná a nie veľmi známa vlastnosť SVG je pointer-events. Definuje či má daný SVG objekt zachytávať eventy (a ak áno, tak v ktorých oblastiach). Dá sa to nastaviť ako vlastnosť objektu alebo pomocou CSS. Ak jej nastavíte hodnotu none, nebude daný SVG objekt odchytávať žiadne eventy.

Takže ak napríklad na stránke pomocou CSS vykreslíte peknú veľkú šípku, ktorá bude upozorňovať na nejaký element, táto šípka neznemožní klikanie na obsah, ktorý prekrýva. Čo by ste dosiahli len veľmi komplikovane, ak by ste tú šípku vložili na dokument obrázkom.

Jirka Kosek

Jen doplním, že pointer-events fungují se všemi elementy na stránce, ne jen s SVG. Takže jde upravit chování i běžných elementů HTML nebo třeba canvasu.

Jirka Kosek

Z pomalého rozšíření SVG bych nevinil jen Microsoft, ale i Adobe. Ve starších verzích IE se pro vykreslování SVG používal SVG Viewer or Adobe, což na svoji dobu byla dost pokročilá implementace SVG. Pak ale Adobe koupil Macromedii (původní autor Flashe) a vše co konkurovalo Flashi dal Adobe k ledu. Přitom Adobe bylo kdyby jedním z hlavních proponentů SVG.

Jirka Kosek

To mám dneska tak špatný den, nebo ty příspěvky jdou přes nějaký filtr:

or -> od
kdyby -> kdysy

Adam Zelenka

Dovolím si jen postnout ukázku využití svg objektů v praxi na interaktivní mapě obchodního centra: http://www.ocletmo.cz/mapa-centra

vhor

Narazil jsem u SVG na problém s písmem – v závislosti na kombinaci prohlížeč/operační systém a nainstalovaných fotech může vypadat text v SVG různě a může mít různou velikost. Dále některé prohlížeče umožní v konfiguraci definovat minimální velikost písma na stránce a toto nastavení se vztahuje i na SVG. Při zmenšení vloženého SVG se pak písmo nezmenší a vypadá to velmi ošklivě. Ladil jsem to u mapy sítě ve formátu SVG. Máte někdo tip na řešení těchto věcí?

Jirka Kosek

Fonty jsou problém a nejen v SVG. Minimální velikost font-size by se na SVG vztahovat neměla, to bych považoval za chybu prohlížeče. Zkuste různé hodnoty vlastnosti text-rendering.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.