FREELessons: 8Length: 52 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Combining Multiple Sprites

This technique requires us to group multiple SVG graphics into a single SVG element in HTML. Doing so will improve the performance of our web pages, whilst giving us a helpful workflow. In this lesson, you will learn how to combine your sprites on your web page.

2.2 Combining Multiple Sprites

Now that we know how to export SVGs from Illustrator, and again you can also do that in other software like Sketch or Inkscape. But now that we know how to do that, let's talk about our first method for using SVG Sprites or for creating Sprites. Now there are dozens of new methods for doing this. We're just gonna cover two of those methods, my two favorite methods in this short course. In this first method is going to involve creating an inline SVG in our HTML code. And it's going to be very similar to what we did in the last video when we just copies our graphic and pasted it into our HTML. Now we're gonna do it a little bit differently but you'll get the idea as we move along. So I'm going to start with this icon test HTML file that we ended with in the last lesson. And I'm gonna save a new version of this. So I'm just gonna go to File > Save as, and I'm gonna change the name here to icons-test02.html, so all the changes we make in this lesson will be saved there. So I'm gonna take this SVG that was created whenever we copied and pasted our graphic into our HTML and I'm actually just going to delete everything. We're gonna re-copy and re-paste some items in a moment, but for now I'm just gonna get rid of them all and in the body of our document I'm gonna creat an SVG object. So we're going to use the SVG tag and I'm gonna set the style equal to display none. Which means that this SVG is not gonna show up initially whenever we load our page. And what we're gonna do with this particular method is we're gonna put a couple of symbols inside this SVG. Each symbol is going to represent a different icon. And then later on, since our style is set to display none, later on we're going to use each of these symbols separately to display our icons on our page. So let's actually zoom in a little bit so you can see our code here. So we've set our style equal to display none. And again, we're gonna use a number of different symbols. And the way we do that is we use this symbol element inside our SVG. And our symbol is going to behave like a reusable piece of code. So we'll just have to define a symbol once. For example, we might have our gear icon, and we're gonna define the path for that icon inside a symbol. So we'll define that symbol once, we'll give it an ID, and then later on in our page we can use that symbol as many times as we want to. But again, we're simply gonna define all of our symbols In our SVG which isn't going to even display on the page, but later on, in our HTML we're going to actually display those, using the use element. So, let's start by creating our first symbol inside our SVG, and again, we're just gonna use the symbol element to do this. And I'm gonna give it an ID and let's call this one home, or we can call it sym-home, since we're gonna have a few different icons here. The sym is short for symbol, and then inside that symbol we're goint to define the path for our item, or for our home icon. So I'm gonna jump back into Illustrator where I have our icons01.sgv file open, and I'm actually gonna close that one. Not gonna save it, I'm gonna open up the actual Illustrator file, the AI file. And we can do this either way. We can open up the AI file here and then copy each layer separately and paste it into our code or we can go into our project files folder, find our SVG file that we exported, and copy and paste the paths from there. So, you can do it either way. I just want to keep you aware of all of our options here. Or I going to do it from illustrator, and I'm going to start with the house icon. That's the only layer I have unlocked and visible right now. So, I'm just going to click on that icon, Cmd+C to copy it, Ctrl+C if you're using a PC. It'll jump back into brackets, and then inside the symbol we've created we'll just paste that code. Now this isn't gonna give us exactly what we need, we're gonna have to edit some of it. We make this code smaller for a moment, so this might be difficult to see for a second but just inside our symbol It's basically inserted a new SVG here and that's not really what we want. Because we've already created our SVG up here, we just want to include the path for this new icon inside our symbol. So the only thing we really need to keep is this path here. So I'm gonna zoom back in, and I'm gonna grab everything from this comment here. We're gonna grab this open SVG tag, the style tags, the defs tags, everything down to the path, and we're gonna keep the path and delete everything else. And then we'll delete this closing svg tag as well. So now all we have is this path inside the symbol that we've already defined. So with this path selected I'm just going to nudge it over a little bit, so it reads a little bit easier. And we've created our first symbol. Now if we were to save this and jump into our browser and test that on the page. This is gonna be icons-test02.html. You'll see that nothing shows up because again we've set our style equal to display:none. So we've made it invisible, and later on we're actually going to use it. So let's create another symbol here and I'll jump into illustrator. And our second symbol is going to be this information symbol. So I'll just click on it and copy it. And note that all of the paths in this symbol are grouped together, so I'll copy that path. Jump back into our HTML and for our second symbol here we'll give it an id of sym-info, if we can spell that right. And then inside that symbol, we're going to paste our path. Now again, it's gonna paste all of the svg information and we don't need all of that. But this particular symbol is a little bit different, because it has some groups in it, because it has multiple shapes that are grouped together. So we do wanna keep those groups, but again, we wanna get rid of this opening comment here as well as the opening SVG tag, the style tags, and the defs tags. We're gonna leave that g tag there because that's how our paths are grouped together into one shape, and then we'll delete our closing SVG tag down here. So again, we need to grab all of this code here, and we're just going to tab that over inside our symbol. So, now we have our second symbol. Our third symbol is going to be this camera icon. So, we're just gonna click on that and copy it, jump back into our code. And I'll go ahead and zoom in again and we'll create another symbol here. And we'll give this an id of sym-camera, and then we just need to paste our code here. So again, let me zoom out so we can see that better, and I realize it's gonna be a little difficult for you to see with the text this small, but when everything starts wrapping around it makes it difficult to read. In fact we could go into our view menu here and turn off the word wrap so that it just disappears off the edge and that just makes it a little bit easier so we can stay zoomed in and see some of our texts. So again, I wanna get rid of our opening comment tag here, the opening SVG, the style text and the defs tags, we'll get rid of all of that. And then we'll get rid of our closing svg tag here and we'll just grab this group and edge it over. So there's that symbol, all right. Let's create our next symbol and this is gonna be our final symbol, and that's this gear symbol here. Let's turn that layer on so we can see it. We'll click on the gear, copy it, and then in our code, we're gonna create our final symbol. We'll give it an id of sym-gear, and then inside that symbol, we're gonna paste our path. So once again, one last time, we'll grab this opening comment tag here, the opening SVG tag, our style tags, our defs tags, we'll get rid of all that. And then we'll get rid of our closing SVG tag. Then we'll grab these groups here and nudge them over. And there we go. So now we have four different symbols here, here, here, and I skipped one here, I scrolled too far, and right here. So we've got our gear, our camera, our info and our home symbols and they're all contained within a single SVG. So now we're gonna treat these separate symbols like Sprites and we are going to access these Sprites one at a time in our HTML code. And we will get to that in the next video, for now let's just save our file and I'll see you then, thank you for watching.

Back to the top