Způsoby vkládání SVG ikonek na web

  • 18.02.2019
  • 0
  • SVG

Co jsou ikonky zač?

Ikonky potkáme pravděpodobně na každém projektu. Mohou symbolizovat sociální sítě, předávat informace ve vizuální podobě, popřípadě nabádat uživatele k určité akci.

Jaké chování od ikonek očekáváme na webu?

  1. musí umět změnit svou barvu (hover, focus, active stavy)
  2. musí být různě velké a responzivní (manipulace s jejich velikosti bez deformace)
  3. musí být znovupoužitelné
  4. jednoduchá změna ikonky napříč celým webem
  5. jednoduché vložení na web
  6. nesmí zpomalovat načítání webu (nevytvářet zbytečné requesty)
  7. nesmí rozbít web
  8. podporu všech majoritních prohlížečů
  9. musí skvělé vypadat v jakémkoliv zařízení s libovolným DPR

Jaký zvolit formát ikonek?

Jedině vektory!

Pokud jste dostali grafiku a jsou v ni ikonky jiného formátu než vektorového, máte 2 možnosti:

  1. zbičovat grafika a donutit ho ikonky vyměnit
  2. pokusit se najít podobnou ikonku a nahradit ji svg formátem

Já preferuji možnost číslo 2. Chybějící ikonky stahuji z knihovny ikonek zdarma. Licence umožňuje jakékoliv využití, krom situace, že byste ikonky přivlastnili nebo přeprodávali.

Proč ne bitmapy?

Bitmapy se používaly ve webdesignu zcela běžně. Nejhlavnějším důvodem, proč se od nich upustilo je jejich kvalita v zařízeních s vysokým rozlišením (DPR). Pár let zpět ještě byla slabá podpora svg v IE prohlížeči, ale dnes vektory můžeme směle používat.

Různá řešení, různá úskalí

Pro nás, pro vývojáře jsou ikonky velkým trním v zadku. Řešení na ikonky existují různá, každé z nich má své výhody i nevýhody. Níže uvádím způsoby, jak svg ikonky můžeme dostat do našeho webu. Jejich uspořádání není náhodné. Začínám nejvhodnějším způsobem a postupně se dostávám k řešením, kterým je lepší se vyhnout.

1. InlineSVG

Jednotlivé ikonky vkládáme inline rovnou do html kódu.

Nevýhody:

  • komplikované následné změny (musíme ručně hledat a měnit v kódu)
  • může rozbít web, pokud ikonka obsahuje nevhodný obsah (xml, id atributy)

Výhody:

  • máme plnou kontrolu nad svg (můžeme ovlivnit jakoukoliv vlastnost pomoci css protože je součásti DOMu)
  • šetříme data (žádné slučování, pouze ikonky, které na stránce potřebujeme)
  • snadné vložení
  • široká podpora prohlížečů

PS – inlineSVG je perfektní, pokud vaše projekty vyvíjíte v Reactu.

2. Svgstore

Všechny ikonky se sloučí do jednoho. Jednotlivé ikonky následně vkládáme pomoci značky <use />. Github.

Nevýhody:

  • velikost souboru může dramatický narůst, pokud je ikonek hodně
  • v případě přidání nové ikonky je potřeba zásah do svg kódu, popřípadě zapnutí task runneru který to udělá automatický

Výhody:

  • ikonky jsou uloženy na jednom místě, změním-li ikonku v zdrojovém souboru – změna se projeví všude bez dalších zásahů
  • ikonky jsou vidět i v odečítačích obrazovek
  • neblokuje vykreslení
  • snadné pro vložení a pochopení

3. SVG v javascriptu

Jednotlivé ikonky vkládáme pomoci <img /> tagu. Následně pomoci AJAXu tyto tagy nahrazujeme inlineSVG. Github.

Nevýhody:

  • stylovat musíme jak img tak i svg
  • funkčnost závislá na javascriptu
  • zátěž na server (requesty na ikonky)
  • může dojít k rozbití webu nevhodným vložením

Výhody:

  • snadná implementace

4. Grunticon

Jedna se o knihovnu, která se postará o co největší podporu prohlížečů za vás. Je to kombinace SVG v CSS a následné načtení Javascriptem. Github. Toto řešení jsem používal několik let, ale nakonec jsem od toho upustil, protože mi nevyhovovalo.

Nevýhody:

  • vygenerované ikonky se načítali přes javascript a dochází ke skákání webu
  • velikost vygenerovaných css souborů není zrovna malá
  • funkcionalita závislá na javascriptu

Výhody:

  • podpora i těch nejstarších (IE 6)
  • plně automatizované

5. Iconfont

Funguje na principu slučování všech použitých ikonek do fontu. Vygenerovaný font se vloží na web a ikonky jsou volány pomoci css tříd nebo specifických znaků. Github.

Nevýhody:

  • odečítače obrazovky znaky nepřečtou
  • uživatel může fonty nahrazovat v prohlížeči včetně toho s ikonkami
  • font se nemusí načíst
  • může docházet ke skoku stránky při načtení, popřípadě zobrazení nežádoucích znaků

Výhody:

  • malá velikost výsledného fontu
  • snadné použití
  • široké množství dostupných knihoven

6. SVG v CSS

Ikonky jsou sloučeny a vloženy do CSS souboru. Github.

Nevýhody:

  • nelze editovat přes css (je to background-image)
  • velký výsledný css soubor
  • komplikovaná následná správa ikonek
  • načítáme všechny ikonky na každou stránku (=zpomaluje web)

Výhody:

  • efektivně využijeme pokud svg nechceme vkládat do html (například šípku pro selectbox)

7. Spritemap

Více obrázku se slučuje do jednoho. Výsledný obrázek je vložen na web a jednotlivé ikonky jsou pozicované pomoci css vlastnosti background-pozition.

Nevýhody:

  • nelze ikonky ovládat pomoci css (nemění barvu ani velikost)
  • složitá údržba mapy (editace, mazání, přidávání ikonek)

Výhody:

Když se nad tím zamyslím, tak neshledávám v tomto řešení žádnou výhodu. Tomuto řešení se raději vyhněte obloukem.

Jaké řešení je to pravé?

Ideální řešení neexistuje. Každé řešení má své pro a proti, které musíme znát. Na jejich základě a typu projektu se pak rozhodnout pro některé z uvedených řešení.

Moje doporučení

Pokud je to možné, používejte inlineSVG. Je to nejsnadnější a zároveň nejefektivnější. Nejste závislí na zapnutém task runneru (grunt). Podpora je velmi široká.

Co používám já

Podrobné řešení včetně ukázky najdete v navazujícím článku.

Komentáře

Přidat nový komentář

Všechny komentáře musí projít schvalovacím procesem.
Slibuji, že vámi uvedený email poslouží výhradně pro upozornění v rámci diskuze.

Děkuji za váš komentář. Po jeho schválení se zde zobrazí.