From the course: Creating Web Icons with SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Overview of this method

Overview of this method

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Overview of this method

“

- [Voiceover] There's a third method for adding SVGs to your site via SVG CSS sprites, and that's what we'll look at in this chapter. Whereas a regular SVG sprite is a single SVG with multiple symbols defined, and SVG CSS sprite is a single CSS document where each of the SVGs are defined in line as data URIs. That may sound a bit convoluted, but don't worry. It'll make sense by the end of the chapter. SVG CSS sprites are not easy to create manually, but that doesn't matter because you don't have to. In this chapter, I'll walk you through two different methods for automatically generating advanced SVG CSS sprites with proper backwards compatibility to all browsers, using a free command line tool called Grunticon. First I'll explain how to use the browser-based version of the tool called Grumpicon. If you don't want to use the command line, I'll show you how to display Grumpicon icons anywhere in your project. Then we'll look at how to use Grunticon and some other Grunt processes to…

Contents