Join Morten Rand-Hendriksen for an in-depth discussion in this video What to know before watching this course, part of Creating Web Icons with SVG.
SVGs are, at their core, vector graphics, and as such, you can make your own. If you want to follow along with your own icons or you're curious about how SVGs are made, I recommend checking out James's course, Creating Icon Fonts for the Web. Now, I know the title says icon fonts, but the technique for creating icon fonts is exactly the same as the technique for creating SVGs. There are also several other courses in the library that cover SVG creation and vector graphics creation in great detail, and I recommend going to check out some of those as well.
While I'll only briefly cover SVG creation in this course, James and the other authors go into great detail on how-to ton of useful tips. Finally, I'll use some command-line tools at different points throughout the course. If you're unfamiliar with Node Package Manager, aka NPM, and, or Grunt.js, I recommend checking out Ray Villalobos's courses on these topics as a primer before we get going, especially Up and Running with NPM and Web Workflows with Grunt.js.
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