From the course: Creating Web Icons with SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Display SVGs from an inline sprite

Display SVGs from an inline sprite

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Display SVGs from an inline sprite

“

- [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…

Contents