Join Morten Rand-Hendriksen for an in-depth discussion in this video Display SVGs from an inline sprite, part of Web Icons with SVG.
- View Offline
- [Voiceover] With an inline SVG sprite in place,…it's time to display the symbols…where we want them to appear in the page.…To do that, we'll refer to each of the symbols using…their ID so here ID's are icon discourse.…Icon home, icon learn, and icon thoughts.…We already know where the icons are going…to appear because we're replacing these existing images.…So all I need to do here is comment out the image,…and then add in the SVG instead.…And this is where using SVG sprite…becomes really interesting.…Because now I get tot tell the browser,…hey I have an SVG and I want you to treat it like an SVG…and that SVG is over there higher up in the document,…so just bring it in to where I want to display right now.…
To make that work, we'll start by setting up an SVG tag.…And I'm going to give it a class because I want it…to appear just like the menu icon appeared before.…So I'll copy out the same exact class here,…and we can also use that class later…to style the SVG if we want to.…And I'll close my SVG right away so I don't forget.…
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