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?
- musí umět změnit svou barvu (hover, focus, active stavy)
- musí být různě velké a responzivní (manipulace s jejich velikosti bez deformace)
- musí být znovupoužitelné
- jednoduchá změna ikonky napříč celým webem
- jednoduché vložení na web
- nesmí zpomalovat načítání webu (nevytvářet zbytečné requesty)
- nesmí rozbít web
- podporu všech majoritních prohlížečů
- 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:
- zbičovat grafika a donutit ho ikonky vyměnit
- 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.
