Grafika SVG je vhodná pro ikony, nebude vypadat mýdlově na zařízeních sítnice a lze ji roztáhnout bez ztráty kvality.
Zde je například jeden sprite SVG ze 4 různé velikosti, originál - 32px:
SVG dělá tuto práci dobře a dobře se hodí pro použití v responzivních rozvrženích.
Ikony pro design si můžete vzít z hotových sad nebo si nakreslit vlastní.
Sady hotových ikon
iconmelon.com
Velká sbírka ikon na různá témata. Načtené ikony se doporučuje vložit do HTML pomocí použití .
icomoon.io
Nejpohodlnější nástroj. Můžete nejen vybírat a stahovat hotové ikony, ale můžete také nahrát své vlastní a získat je jako písmo a/nebo sprite. Spolu se spritem je nabídnuto stažení jeho PNG verze.
flaticon.com
Velká sbírka, ikony jsou pohodlně rozděleny do kategorií. Vybrané ikony lze stáhnout v jednotlivých formátech (font, SVG, PNG) nebo všechny najednou.
Kreslíme sami sebe
K vytvoření vlastní sady ikon budete potřebovat vektorový editor:
Adobe Illustrator je podle mě nejlepší. 599 RUB/měsíc v rámci předplatného Creative Cloud;
Inkscape je zdarma a není příliš uživatelsky přívětivý;
Sketch – pro Mac OS, 79,99 $. Má nějaké problémy s vektorizací tahů, ale obecně docela pohodlné.
Hubnutí
Hotový soubor SVG obvykle obsahuje spoustu zbytečných věcí, ale zároveň se dobře hodí k optimalizaci. Odebráno z kódu zbytečné atributy, mezery a pomlčky a v číslech se sníží počet znaků za tečkou. Hmotnost pilníku se sníží o 30–50 %. Optimalizační nástroje:
grunt-svgmin- úkol pro Grunt pomocí svgo. V tomto případě budou samotné soubory převzaty ze zdrojové složky, optimalizovány a uloženy ve složce výsledků. Velmi pohodlné.
Písmo sprite nebo ikony?
Písmo je vhodnou alternativou ke spritu. Není třeba se obtěžovat s mřížkou a uspořádáním ikon; je vhodné přidávat nové symboly, i když to vyžaduje doplňkové nástroje.
Pomocí písma můžete vytvářet nejen jednobarevné ikony, ale i vícebarevné.
Vlastní písmo si můžete vyrobit například na webu icomoon.io/app/. Přibližný sled akcí:
Vyberte ikony ze sady a/nebo nahrajte své vlastní.
Klepněte na tlačítko Písmo níže.
V tomto kroku můžete změnit přiřazení symbolů ikonám nebo rovnou stáhnout výsledné písmo.
Spolu s fontem ve čtyřech formátech (.woff, .svg, .ttf, .eot) se stahuje CSS a demo soubor.
Vložená písma fungují i v IE 8, ale mají neočekávané problémy s podporou v některých moderních prohlížečích. Opera Mini vůbec nepodporuje vlastní písma, Firefox vyžaduje kouzla pro server, kde se písmo nachází (řešeno pomocí base64), Chrome může písmo uvolnit, pokud necháte kartu dlouho otevřenou:
V Chrome v systému Windows 7 může také stránka s vloženými fonty při otevírání zamrznout a v některých jiných prohlížečích se místo ikon může objevit cokoli:
Obrázek z článku Chrise Cohera Icon System with SVG Sprites. Kdysi jsem na stejném místě viděl hieroglyfy, ale teď je to SVG, takže nemůžu udělat snímek obrazovky. CSS-triky mimochodem velmi aktivně využívají SVG ve svém novém designu a vývojáři Codepen upustili od používání ikonových písem ve prospěch SVG v novém designu editoru.
Navzdory snadnému použití existují problémy s podporou písem v momentálně donutí vás vybrat ikony SVG.
Chtěl bych doufat, že v budoucnu budou vložená písma lépe podporována.
Jaké jsou různé způsoby vložení SVG na stránku?
Skřítek
.icon ( obrázek na pozadí: url(vaše.svg); )
Pro:
krátký čitelný kód;
obrázek je uložen do mezipaměti;
nevýhody:
požadavek na server;
ve starších operách je podpora SVG na pozadí zvláštní: problémy mohou nastat při přidávání rámečku k prvku s pozadím SVG a v Opeře Mini fungují pouze pozadí bez viewBoxu;
ikony ve spritu nejsou dostupné pro styly stránek;
