Strávili jsme spoustu času mluvením o použití inline a prvku. Můžete si postavit ikonový systém, který má mnoho výhod.
Systém ikon SVG můžete vytvořit i jinými způsoby. Dalo by se rozložit tradiční mřížkovaný sprite list v SVG a udělat skřítky na pozadí, jako jsme to dělali s rastrovými obrázky. V budoucnu budete moci používat identifikátory fragmentů, takže to bude ještě o něco jednodušší. Více informací o těchto věcech.
Dalším způsobem je vložit datové URI obrázku SVG přímo do souboru CSS. To je přístup, který Grunticon zaujímá.
Grunticon je plugin Grunt pro automatizaci systému ikon SVG. Vezme složku plnou SVG a zpracuje je do souboru CSS. Existuje spousta selektorů na základě názvů souborů obrázků SVG, které mají background-imageURI dat SVG (ne Base64).
Pokud to uděláte, znamená to, že získáte škálovatelnost výhod SVG a velikosti souboru, ale to je vše. Přesto je to často vše, co potřebujete.
Snad nejlepší na Grunticon je však to, že vám poskytne vše potřebné pro záložní řešení. To zahrnuje alternativní šablonu stylů pro datové URI PNG a dokonce i jednotlivé PNG samotné (které pro vás vytvoří). Navíc skript, který používáte na své stránce k určení podpory a načte pouze příslušnou šablonu stylů.
Myslím, že je spravedlivé říci, že díky tomu jsou záložní řešení snadněji zpracovatelná než defs / technika. Ne že by to bylo nemožné.
Grumpicon je verze Grunticon v prohlížeči, kterou jsme použili v tomto screencastu.
Grunticon, jak to píšu, pracuje na způsobu, jak se postupně vylepšovat až k vloženému inline SVG, což by bylo docela skvělé!