Jak vytvořit a spravovat SVG Sprites

SVG vyhrál závod, pokud jde o grafiku, která se měří na webu. Návrháři a vývojáři vybírají SVG namísto ikonových písem, rastrových obrázků a rastrových skriptů.

Výhody používání SVG jsou četné, ale pro mě se snižuje škálovatelnost.

Použití SVG může být stejně jednoduché jako kopírování a vkládání exportovaného kódu z vektorového programu. Odtamtud problém spočívá v tom, že tyto grafiky poskytujeme co nejefektivněji.

Zadejte SVG sprites. Ty pracují podobně jako obrazové sprites dělají nicméně, jak jsou vytvořeny a zahrnuty na webové stránce je velmi odlišný.

Proč vůbec používat Sprites?

Sprites pomáhají zvyšovat rychlost, udržovat konzistentní pracovní vývoj a vytvářet ikony mnohem rychleji. SVG sprites jsou typicky vytvořeny pomocí ikon podobného tvaru nebo formy, zatímco grafiky většího rozsahu jsou jednorázové aplikace.

V mnoha případech bude velikost knihovny ikonové knihovny. Přidání nových ikon musí být efektivní a nakonec snadné. SVG sprites pomáhá realizovat tuto realitu.

Exportovat kód SVG

SVG lze exportovat z vašeho oblíbeného vektorového grafického programu. Mám tendenci používat kombinaci nástrojů a zjistil jsem, že všichni mají velkou podporu pro export SVG. Skica vyniká zejména proto, že můžete vybrat ikonu nebo grafický a stisknout příkaz + c a nechat tento kód SVG zkopírovat do schránky. Poté se můžete vydat do editoru kódu, vložit kód a graficky se objevit před očima v prohlížeči.

Optimalizace SVG pro web

Je smutné, že pokud byste skopírovali a vložili z náčrtu, zjistíte, že kód je neoptimální a mohl by být lépe optimalizován. K dispozici jsou některé nástroje.

Používáte-li skici zejména, podívejte se na Zásuvný modul kompresoru SVGO . Při exportu SVG plugin automaticky optimalizuje před uložením souboru.

Pokud nepoužíváte skici, podívejte se na stejné funkce formulář aplikace nebo pokud dáváte přednost webovým aplikacím, Jake Archibald sestavte jeden pro vás .

Vytváření SVG Sprites ručně

Vytvoření skriptu SVG lze provést ručně. Budete potřebovat vektorový program, který může generovat SVG kód. Za tímto účelem využiji Sketch a exportuji několik ikon jako SVG.

Po exportu ikon a jejich spouštění prostřednictvím pluginu SVGO Compressor jsem ponechán s následujícími pro každou ikonu. Všimněte si, že v tomto okamžiku každá ikona je samostatný soubor:

Nyní, když jsou naše SVG optimalizovány, můžeme začít vytvářet sprite pomocí výše uvedeného kódu. Vytvoření spritového startu s okolím

Všimněte si, jak má SVG inline styl zobrazení: žádný . To je zapotřebí pro správné použití SVG sprites. Přestože se ikony na stránce nevyjadřují, bude to velké množství prostoru. Abychom se vyhnuli tomuto extra prostoru SVG vytváří, skrýváme SVG pomocí CSS.

Jednoduché zahrnutí kódu z ikon v tomto okamžiku nestačí. Musíme využít a který vám umožní vložit kód SVG a dodat jeho vlastní atribut viewBox, který je důležitý pro ikony, které se mohou zobrazovat v různých šířkách a výškách.

Prvky definované uvnitř element může být vykreslen do prohlížeče pouze tehdy, když je odkazován živel.

Závěrečný sprite se podobá následujícímu úryvku:

Všimněte si, jak jsem přidal atributy id pro každý symbolový prvek. To je důležité, protože když odkazujete na konkrétní ikonu ve sprite, potřebujete jedinečný způsob cílení. Také si všimněte, jak každá ikona má své vlastní parametry ViewBox . První dva parametry budou téměř vždy "0 0"; druhé dvě budou stejné jako velikost ikony, kterou jste exportovali.

Včetně ikony na stránce

S přítelem, který je připraven k použití, potřebujeme způsob, jak na stránce zahrnout určité ikony. K tomu použijete prvek takto:

Na vaší stránce byste měli vidět ikonu a to je opravdu vše, co je k tomu!

Automatizace SVG Sprites

Vytváření inline SVG sprites není všechno tak těžké. Problém spočívá v tom, že mnoho vývojářů potřebuje vytvořit střihy pro stovky ikon nebo více pro robustní aplikace. Vytvoření něčeho takového by mohlo být časově náročné a zdlouhavé. Vývojáři potřebují způsob, jak tento proces automatizovat, takže nejsou ztraceni časem vytvářet ručně ruce.

Naštěstí existují nástroje pro takovou věc. Správci úloh, jako například Grunt nebo Doušek mít k dispozici pluginy k použití. To zjednodušuje vytváření skriptů SVG. Přidáním každého souboru SVG v daném adresáři bude plugin optimalizovat a generovat všechny SVG ve vašem referenčním adresáři, které budou zahrnuty do čerstvého nového sprite.

Pokud potřebujete přidat další ikony do sprite, vše, co opravdu musíte udělat, je exportovat ikonu jako SVG a přidat ji do stejné složky. Odtud plugin doplňuje časově náročnou část.

Některé dostupné pluginy v různých příchutích: grunt-svgstore , gulp-svg-sprites , svg-sprite .

Závěr

Stejně jako u všech věcí ve vývoji webových stránek existuje více než jeden způsob, jak vytvořit SVG sprites. Můžete je odkazovat externě, zahrnout je prostřednictvím CSS , a dokonce je vyrobit reagující .