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
Skill Level Intermediate
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.