FREELessons: 8Length: 52 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Cropping Your Graphics

Now that you understand the viewbox, it’s time to make use of it. In this lesson, you will display and manipulate your icons individually by using the viewbox to crop your SVG.

3.3 Cropping Your Graphics

Hello, and welcome back to using SVG Sprites. Now, that we understand the viewbox a little bit better, we can now implement our icons in our HTML. So I'm gonna jump into brackets, and I've still got one of our older files open here that we used several videos ago. And I'm gonna take this file and just strip out everything inside it, we're just gonna use this as a starting point. And we're gonna save our new file as icons-test04.html. So I'm gonna grab everything except for the body here. We're gonna grab everything inside the body and just delete it. Then we might include a little h1 here that says, SVG cropping and then below this we'll go ahead and insert our icons. So we're gonna use an image tag to insert our icons. So I'm gonna set my source equal to and I'm gonna set it equal to the SVG that we saved which is icons-grid.svg. And for now, let's just leave it at that and see what our file looks like. So I'm gonna save that and then I'm gonna jump into finder. And I'm gonna grab icons-test04.html and open it up and as you can see it displays our entire SVG file which contains all four icons. And it stretches that SVG out to the entire width of our browser Window which we've seen before. That's what it's naturally going to do whenever we create our SVG because it can be resized to any size. So let's go back into brackets and let's talk about how to trim this down a little bit. First of all, let's say that we just wanna specify a width here. Let's set our width equal to let's just say, 300 pixels. So we'll just set it equal to 300, we'll save that, and refresh the page. Now normally, I would set that using CSS, but for now I'm just gonna set it using that attribute here. So that gets it down to a much more manageable size. Now, let's take a look at our viewBox. How do we create a viewBox using this image tag? Now, we can't do it the same way we did with our SVGs and previous videos. If we go back to icons-test03 for example, you'll see that we created an SVG, and the SVG element actually has a viewBox element or a viewBox attribute. Well, we can't use that viewBox attribute on the image element. We need to do something different. So we're gonna go back to icons-test04 and we're going to alter the source a little bit. We're gonna leave icons-grid.svg but before we close the quotation marks out there, I'm gonna do something different. I'm gonna type # and then svgView with a capital V, and then I'll go ahead and put an opening and closing parenthesis there. Now, when my cursor's there it's hard to see that but if I move it away, you can see we've got our opening and closing parentheses. Let's make this code a little bit bigger, so it's easier to read. And then inside those parentheses, we're going to create our viewBox. We'll type out viewBox with a capital B, lower case v at the beginning. And then we'll set our four values for the viewBox inside another set of parenthesis. So let me move my cursor away again, so you can see those parenthesis there. And inside those parenthesis we'll simply put our four values separated by commas. Now, when we used the viewBox attribute with our SVG earlier, we didn't have them separated by commas but when we do it this way we need to separate them by commas. So we're gonna start in the top left corner which has an xy coordinate of 0, 0 so our first two values are both going to be 0. And then if you remember our third and fourth value represent the width and height that we would display if this SVG were displayed at full size. At full size, the width and height are both 300, and if we want it to display just one icon, the width and height would be half that which would be 150. So we're gonna set our width and height both to 150. So now we see our first two value are 0, 0 which means we're gonna start on the top left corner of our image. And then the width and height we're gonna crop is 150 by 150. So this will grab the top left segment of our SVG which if we look back at our Illustrator file, it's gonna be this house icon. Let's see if that works. I'm gonna save our file, we're gonna jump back into our browser and let's refresh it. And sure enough now we see only the house. And now, that we're viewing that and have set up our viewBox like we wanted, we can change the width to whatever we want. So it's a good idea to set your viewBox first and then use width and height to scale your item. So let's say, we want it only to be 50 pixels wide. We can enter 50 in there. Save our file, refresh our page. And now, we have a smaller 50 pixel by 50 pixel icon. So our second icon is going to be very, very similar. We're only gonna change one value. If we go back to our Illustrator file, all of our files are going to be 150 by 150 pixels. So it's all gonna have the same width and height. We're only gonna be changing the first two values. So if we wanna move over to our information icon or this exclamation point icon. We just need to increase the x coordinate, that very first coordinate to a value of 150 because 150 gets us half way across our image. So let's jump back into our code and let's highlight this image tag here and copy it. And then we'll just paste it again. And this time we're just gonna change that first value to 150. So we've just moved that x value over 150 pixels, so now we should be seeing the top right quadrant. So let's save that, jump back into our browser and refresh. And now, we're seeing our second icon here. Now, we're still seeing the first one because remember we already created that first image here. So this first image is showing a house. The second image is showing the information icon. So we could add classes to these, class="" and we could call it "icon-house" and we can do the same thing over here. We can call it class="icon-info or something like that. Now, I'm actually going to delete these for now just because their taking up too much width. I wanna be able to see all these in the video. But you can add classes there. You can add your Alt attributes there. You get the basic idea. And the great thing about doing things this way is we're only calling a single SVG file. That SVG file is an external file. So when you call that file, there's an HTTP request that's made. But since we're just calling the same file over and over again, it's really only one HTTP request. It only has to call that image once which ultimately will save you a lot on bandwidth, especially if you have a high trafficked site. So we can paste that two more times and let's say we wanted to point to our bottom left icon which is the camera icon here. Well with the camera icon, we wanna stay on the left edge of our graphic. So our x coordinate is gonna stay at 0, but our y coordinate which is our vertical coordinate is going to move down 150 pixels. So our second coordinate is gonna be 150. So for this one we are gonna set it to 0, 150, and then our width and height are gonna stay at 150 by 150. Then for our bottom right image our x and y coordinates are both going to have to increase to 150 in order to get our starting point in the very center of the document. So here our x and y coordinates are both gonna be 150. So we have 150 for all four values of our last icon. So we can save that again, jump back into our file. Let's go to our browser here and refresh. And now, we can see all four of our icons and we can put those anywhere on the page. We don't have to put them right next to each other. We could go back to our file here and put some line breaks in between them. And we'll go ahead and copy that. So we do that and put them all in separate lines and refresh the page. There we go. So you can get as creative as you want with this and you don't have to use just four icons in your SVG. I've seen entire icon sets with over 100 icons, all put on one sprite sheet and displayed like this, where you're pointing to different coordinates in that sprite sheet in order to display the image that you want to display. So again, this is a very flexible system. And since we're using vector graphics, we can make them pretty much any size we want to and it will look good. So if we wanted to make this first one 100 pixels. We wanted to make the second one 200 pixels, the third one maybe 250, and our last one 300 pixels. We could certainly do that. We'd save that. Refresh our page. And there we go. Now, we have our icons at four different sizes. So that's how you use this SVG cropping technique to display your SVG sprites in your browser window. Thank you for watching, and I'll see you in the next lesson.

Back to the top