Join Morten Rand-Hendriksen for an in-depth discussion in this video Overview of this method, part of Web Icons with SVG.
- View Offline
- [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 fully automate the process…
SVG is an XML-based method for instructing the browser to draw scalable vector graphics based on defined shapes and coordinates. The challenge with SVGs is they are not like other graphic files: Rather than a grid of pixels, they are code instructions interpreted by the browser on the fly. This poses some unique challenges and unique opportunities when it comes to implementation. In this course, you'll learn various methods to deploy SVG icons in webpages, each with its own use cases, benefits, and drawbacks. Morten Rand-Hendriksen shows how to insert individual SVG images, add SVGs as inline elements and SVG sprites via the command line, and automate SVGs with Grunticon. Plus, get tips on making your graphics backward-compatible and accessible, and using SVG icons in WordPress.
- SVG vs. icon fonts
- Getting existing SVG icons
- Creating your own icons
- Adding individual SVG icons to webpages
- Adding SVG as an inline element or background image
- Using external and inline SVG sprites
- Automating SVG generation with Grunticon
- Using SVG icons in WordPress