FREELessons: 8Length: 52 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Preparing Your SVG in Adobe Illustrator

Our next technique involves cropping a single SVG file that contains multiple icons within it. In this lesson, you will learn how to prepare your graphics for this technique in Illustrator.

3.1 Preparing Your SVG in Adobe Illustrator

Hello and welcome back to Using SVG Sprites. In this lesson we're going to get started talking about our second technique for creating and displaying sprites on our page using SVG's. And this second technique I like to call SVG cropping. And what this technique involves is, it involves creating an SVG that displays all of our icons at the same time. And then, when we want to display one of those icons on the page, we simply refer to that SVG, but we only show a certain part of it. And we're going to be using the view box attribute of SVGs in order to accomplish this. But before we can actually make this happen, we need to first set up our SVG and export our SVG In the format that we need it. Now again, I want all four of our icons, the gear, camera, information and house, to all appear in the same graphic. So I'm basically going to spread these four icons around on our Artboard. And if we go to our Artboard right now, using the Artboard tool, and again you can do this in any software, you don't have to use Illustrator. The techniques will probably be a little bit different depending on what software you're using, but you should be able to figure it out. It's a pretty simple process. But in Illustrator, once we click on our Artboard tool, we can look up here at the top and see that our Artboard is 300 pixels by 300 pixels. And that's fine. I like a nice round number for those values, because it makes it easier to figure out what values we need for our viewbox later on. Now we will talk more about viewbox, you don't have to know all of the specifics just yet. We've looked at it a little bit already, but we're going to go a little bit more in depth in the viewbox in the next lesson. But for now, all I need to know is that the width and height is 300 pixels by 300 pixels and I also want a good center point to work with. So with my artboard tool selected in Illustrator, I can come up here near the top and hover over this icon here that says Show Center Mark, and when we click on that you'll see that it gives us a little crosshair in the middle. There's a similar tool right next to it that gives us crosshairs at the edges and that gives us a pretty good view of what our, or of where our icons need to be. Now if you want to get more specific with it or if you don't have just four icons, lets say you have 10 or 12 icons that you need to spread across a larger area, this particular technique won't work for you. You might need to show the grid and display things in the grid. But for what we're doing here, with just four icons, this should work. So I'm gonna start with our house icon. I'm gonna switch the selection tool, make sure the house layer's selected and then we'll drag our house up. And then we need to resize it a little bit, so I'm gonna hold onto shift as I resize it so it maintains the right proportions here. And one thing we can do here, we can see when we look at our item, especially if we go up to the View menu, I'm sorry the Window menu and click on Info, we can get more information about the width and height of our item and we see that it's a little bit taller than it is wide. So we can use this height to determine how tall our house needs to be. Remember we've got a 300 by 300 pixel SVG here. So one of these four quadrants is going to be 150 by 150. So if we wanted to we could make this 150 pixels tall. Now I like to have a couple pixels of padding just so that it doesn't come close to running into any of our other items, but I want to get it pretty close to that 150 pixels tall. So with our house selected, I'm going to come up here to the top to the Transform link here and that will open up our Transform panel, and here you can see our width and height. And I want to make sure that I constrain the width and height so that it keeps the same height to width ratio, so I'm gonna click over here on the right to constrain width and height proportions, and you should see an icon that looks similar to this. And then for our height, I'm gonna set it to 148 pixels, which is almost that full height there. So I'm gonna drag it up until it snaps to the very top like so, and then we'll nudge it over, maybe nudge it down one pixel. That way we have one pixel of extra padding at the bottom and at the top, and that gets us about where we want to be. Might nudge that over to the left a little bit more. You can fine tune that as much as you want to, but you get the basic idea. So there's our house. And I'm going to turn on the information layer and click on that icon. And then once we have that selected, you'll notice first of all that all of these shapes are grouped together. The exclamation point and the circle around it, they're all grouped together. So with this selected I'm going to the Transform panel and I'm going to set the height, once again, to 148 pixels. Then we can grab this one and drag it to the upper right corner. And I'm gonna snap it to the upper right corner of our file, and then we'll just nudge it to the left once and down once. And there we go. Next I'm gonna turn on the camera layer, and then we'll select that camera layer and grab our icon here. Now this one is wider than it is tall. So I'm gonna set the width of this item to 148. So I'm gonna go to the Transform panel, and for the width, I'm gonna set that to 148 pixels. I'll drag it over here to the left, and then nudge it over so that it's one pixel away from the left edge of our artboard. And we might need to zoom in a little bit just to make sure that it's where we want it to be. And that seems to work pretty well. It doesn't have to be perfect, but it needs to be pretty close to perfect. So you can decide for yourself how far up and down you wanna move it, if you want to vertically center it or, you know, however you want to lay it out, but that works for me. Our next item is our gear layer, so I'm going to go ahead and turn that on and we'll select our gear. And then this gear has the same width and height. That's 274 by 274 so we're going to transform it. Set our height to 148 and that should do the same for the width as well. And we'll drag it down to the lower right hand corner until it snaps to the edges. And then I'll just hit up and left once. And there we go. And that's how we're gonna set up our sprite sheet. So now we have a simple SVG that has all four of our icons on it at the same time. And we're going to display only one icon at a time by displaying our SVG, but just displaying a small portion of it. And again, we're gonna do that using the viewbox attribute. So I'm gonna save our file here. We'll go to File > Save As, and in our Project Files folder, I will go ahead and save this as icons-grid, since we've got it in a grid. So we'll save it as an Illustrator file first. And then I'm going to go to File > Save As again and this time from the drop down under Format, I'm going to switch to SVG. We're going to save it as icons-grid.svg. We'll save it and then I'll just leave all the default options and click on Ok. So now that we have our SVG saved, in the next video we're going to talk about the viewbox attribute and how we're going to use that viewbox to crop our SVG as we display it on our webpage. So, thank you for watching, and I'll see you in the next lesson.

Back to the top