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.

Create a manual SVG sprite

Create a manual SVG sprite

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Create a manual SVG sprite

“

- [Voiceover] In this chapter we'll focus on the menu, or rather, the icons that appear next to each menu item. Currently, these icons are PNGs and I want to swap them out for SVGs. Looking at the HTML markup, you'll see these icons are actual elements on the page. This is so I can use Flexbox to layout the menu items and make them responsive if I want to. In the Exercise Files for this movie, 04_02, I've created a new folder under icons and menu called SVG_raw that contains raw versions of each of the SVGs we want to use in the menu. Now, we're going to use these raw SVGs to create an inline SVG sprite in the HTML document. The sprite lives directly under the starting Body tag, before any of the other contents. So I'll create some more space here, and then we can get started. Here, I'm going to use some of the markup from an existing SVG, and then augment it to work as an SVG sprite. The first element I need is the SVG tag itself. So, I'll just copy out the entire SVG tag from one of…

Contents