Released
8/4/2016SVG 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
Duration
Views
- [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.
Share this video
Embed this video
Video: Welcome