Creating Web Icons with SVG

- [Voiceover] Imagine being able to add graphics to your web projects that can be controlled using JavaScript and CSS. Well, that fantasy is now becoming reality with SVG. I'm senior staff author, Morten Rand-Hendricksen and this is Web Icons with SVG. I'll be your guide as we work our way through some weird and wonderful tools and techniques that allow us to place scalable vector graphics, or SVGs, on the web. To start off, I'll give you a brief introduction to SVG, why they're better than icon fonts, where to get them, and how to optimize them.

Then we'll deep-dive into different methods for adding SVGs to your web projects, including using SVGs as individual images and background images, creating inline and external SVG sprites with command line tools, and using the advanced command line tool, Grunticon, to make the process of adding SVGs to your site both automated and kind of magical. Throughout the course, I'll show you how to make SVGs backwards-compatible and accessible and we'll cap things off at the end with a brief rundown of how to use these techniques to add SVGs to your WordPress themes.

The SVG is in many way the holy grail of web graphics and once you know how to incorporate them into your web projects, you'll be able to do things with graphics you previously only dreamed of. I'm here to show you how to do it right, so let's get cracking with Web Icons with SVG.