Join Morten Rand-Hendriksen for an in-depth discussion in this video Create an optimized SVG sprite with SVGO and spritesh, part of Creating Web Icons with SVG.
- [Voiceover] If you're with me so far,…I'm sure you'll agree that using inline SVG sprites…and simply referencing the symbols…within that sprites to display icons on a page…is a really simple and straightforward way…of using SVGs, especially in elements like menu items.…However, manually generating that SVG sprite…can be quite a challenge,…especially if you have a lot of SVGs.…Right now I only have four SVGs…and they're all the same size,…but I've worked with projects that have 50 or 100 SVGs…of different sizes,…and a lot of them were way more complex…than what you see here.…
Those SVG sprites are impossible to manage manually,…and to add to that complexity,…in projects like this…you'll often have to update your SVGs on the fly,…and, doing that, when you have this huge manual file,…just becomes unwieldy and impossible.…The good news is, you don't have to do any of that.…We can automate this entire process…using Command Line Tools.…Now, before we continue, a point of order.…If you're using Windows computers,…and you've never used Node or NPM before,…
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