FREELessons: 8Length: 52 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Making “Use” of Your Sprites

Once your SVG graphics have been combined into a single SVG element, all these icons are now available for use. In this lesson, you will learn how to display a single sprite with the <use> element.

2.3 Making “Use” of Your Sprites

Hello, and welcome back to Using SVG Sprites. Now that we've combined our symbols into one SVG. I wanna take these symbols and display them one at a time on our page. Because remember our SVG right now is set to a display of none which means it's not gonna show up on the stage at all. But now we can use these symbols we've created and reference those symbols anywhere on our page using the use element and we're going to do that in a new file. I don't want to save over the changes for the last lesson. So let's save this as a new file and I'm gonna save it as Icons test03.html. And I'm gonna scroll down below our closing svg tag here, maybe skip a couple lines. And let's put an h1 tag here, and we'll just say Creating Inline SVG Sprites. And then after that h1, we're gonna create our first, or display our first icon. So let's display our gear icon here and it has an id of sym-gear. Now in order to use this symbol that we've already created, we're going to need to create first of all, a new svg element. So under our h1, I'm gonna create a new svg element and I'm gonna give it a class of sym-gear. And you'll notice that's the same name that we gave up here for the ID that's not a requirement and you can give it whatever class name you want to. I just gave it the same name for the sake of convenience and keep in mind this is a class not an ID. Up here for the symbol it's an ID and we're gonna need to point to that ID now. And we're gonna do that inside a use element. So inside our svg, we're gonna create a use element here, and we're gonna use an Href attribute, but we're gonna an href attribute that you might not have seen before. We're gonna type in xlink:href and then we are going to set that equal to the id name of the symbol we wanna use and we need to proceed that with a pound sign, so I am gonna type pound and then sym hyphen gear. And then we'll have our closing use element or tag after that. Now, you'll notice that we don't have to put anything between our opening and closing use tag, we just need both of those there. So, I'm going to zoom in on the code so you can see it a little be better. Again, we've created a new SVG. You don't have to give it a class name if you don't want to, I've just given it that class name here. And then inside that new svg we've created this use element. And then we're using the xlink:href attribute setting that equal to the ID of the symbol we wanna use. So let's save that, and then let's jump into our browser and navigate to test03.html. And now we can see our H1 up at the top and we can also see our gear icon, although our gear icon Cog is cut off at the bottom. If you wanna make sure that the entire icon shows up, then you need to know the natural width and height of that icon and we can get that from our Illustrator file. So with our gear icon still selected here, we can go to window and then info and that will open up the info panel here and we can see that it has a width and a height of 274 pixel, so we're gonna use that. So let's jump back into our code and we're going to make use of the view box attribute of our svg here. The view box attribute allows us to specify the area of our svg or our icon or our graphic that we want to actually view. So we're gonna start off with two zeroes. That 0, 0 determines our offset from the top left corner of our file, and we want to start at the top left corner of our file. We don't need an offset, so we're leaving that at 0, 0. But then we need the width and height, and the width and height as we discussed a second is 274 by 274. Now this might now give you the result you're looking for but lets go ahead and take a look. Lets save our file, go back to our browser and refresh the page. Now you can see that our icon takes up the full width of the stage, or of the browser window and that's not really what we were going for. But let's talk about how the viewbox works. When we create a viewbox and define its width and height as we did here. We've basically just defined how much of that SVG we want to view. We want to view all 274 by 274 pixels of it. However, that doesn't tell us how big this actual SVG element is going to be. By default that SVG is gonna take up the entire width and height of it's containing element. So if we don't want that, then we also need to set a width and height for our SVG. So if we were to set our width and height here, to 274 by 274, save that an refresh, then we get our icon back at our original size. However, we might not want its original size, we might want something much smaller so we might change this to 100 pixels by 100 pixels. And that's not going to cut off our graphic, it's just going to make it smaller. It's not gonna cut it off because we've defined in our view box that we want to show the entire 274 square pixel area of our SVG, we want to display that entire area. We just wanna shrink that entire area down to be within a height of 100. So let's save that, and refresh our page, and now we have our icon 100 pixels by 100 pixels. And we've seen in this video already just how beautiful these icons remain at any given size. Whether you make it smaller or whether you make it much, much larger, our image maintains its crisp smooth edges, it doesn't get pixellated as we resize it. Now we can display those gears as many times as we want to, we've defined the path once up here. But now we can display that path as many times as we want, so we can grab this SVG copy it, paste it a few times, save our file, and refresh, and now we have four gears in a row. We can even change the color of those gears using CSS if we want to. And if we're gonna use CSS, we need to do it inside the SVG element, so let's say in our second SVG here we wanted to define the style, so we could put our opening and closing style tags here. And then inside those style tags we could define the fill for our shape. And for our fill, we can use the hexidecimal value, so we could set that to, maybe, pound 555 to make that a medium color. We could save that and refresh our page. Actually, we need to define the element that's going to get that filled. So we've defined our CSS property here but we didn't actually stick it inside a rule. So what we need to point to here our use statement. So inside our use we could put this fill 555, save that, and refresh, and now you can see that it styles all of them. If you don't want it to style all of them, then we can change that. So maybe for this particular use element, we can give it a class of grey. So we can point to use.gray here, save that and refresh. And now we can see just that one item has that different background color. So we can do a lot with these symbols. We can give each one a different background color if we want to, and we can easily switch to a different symbol simply by pointing to a different ID name. So, if we had sym-camera instead, we could save that. Come down here, and maybe change our last one to sym-camera. We'll paste that in both places, save that, refresh our page, and now you can see that our last one is the camera. Now we have a problem in that our camera is being cut off on the right edge because it's a different size than our other three, but all we need to do is jump into our illustrator file. Let's turn on our camera layer and click on that and we can see it's 287 by 187. So we can go back into our code, and for our view box, it's gonna be 287 by 187. And then we could set maybe just the height. So let's turn our width off, and just set the height and see what happens. Let's save that and refresh and now we can see it takes up the same height as the rest of them because we just set our height to 100 and the width is basically automatically set. So there's a lot of flexibility with this particular method but that's how you create Inline icons using symbols within your SVG. So thank you for watching and I'll see you in the next lesson.

Back to the top