3.2 Understanding the Viewbox

Hello and welcome back to using SVG Sprites. In our last lesson we edited our Illustrator file, to put all four of our icons next to each other in the same graphic, and now we're gonna talk about the view box attribute, which will allow us to crop our graphic in the browser. Now in order to crop our graphic to the size of one of our icons, we need four bits of information. We'll need the x and y coordinates, which are the first two pieces of information. That's going to determine the starting point for our crop, and then we need the width and height that we want to display. Those are our other two pieces of information. And we're going to store all of those pieces of information, all of those numbers inside this view box attribute. So I'm going to jump back over to brackets and we're going to take a look at some code we've already written for our previous experiment. And if you remember before our icons here, we used this viewbox attribute and this viewbox attribute has those four values that we just talked about. The first two values represent an x and y coordinate, or the starting point of our crop, and then our third and fourth values are going to represent the width and height of our crop. So let's take a look at these first two values. Again, this is the x and y coordinate, so this is going to determine the upper left-hand corner, or the location of the upper left-hand corner of our crop. So if we jump back into our graphic here, that 0,0 coordinate would be in the upper left hand corner of our SVG. For many different applications of using SVGs, whenever you would use that view box attribute, you would usually set those first two values to 0, 0 because you want to start in the upper left hand corner. However, when you're arranging your icons like this and you might not always want to start at that upper left hand corner. That's when you would change those values. So the first value is the x-coordinate. The x-coordinate gets larger as you move from left to right. And our image here is 300 pixels wide, so once we get to this halfway point here, our x value is now half of that, which is 150 pixels. So if we set that first value, that x coordinate to a value of 150, then our starting point would be halfway across the page. So if for example, we had 150 for the first value and we left our second value at zero, then our starting point would again be up here in the top middle. The second value, which represents the y coordinate, will get larger as we move from top to bottom on our page. So as we move halfway down our page, once we get to that halfway point, our y value will be at 150. So if we wanted to select this gear, for example, we would want to start in the upper left hand corner of that gear, which is right in the center of our graphic. So we would want to move over 150 pixels from the left side of the art board, which would be that first value, that x-coordinate, we would set it to 150. And then that second coordinate would be coming down 150 pixels from the top of the art board, so that second value would be 150 as well. So if we wanted to show this entire area here that contains our gear, our first two values would both be set to 150 because, again, that's the top left corner. Now the third and fourth value, as we've mentioned before, is going to represent the width and height that we want to display. Now, again, this width and height here, this is not going to scale the graphics inside this SVG. This is simply going to determine what portion of those graphics we display. So when you're entering in these values here, you need to enter them in as though the SVG were being displayed at 100%, at 300 pixels by 300 pixels in our instance. So since all four of our graphics here, all four of our icons, are going to be 150 pixels wide by 150 pixels tall, for all of our SVGs, or for what all of our view box attributes, both of these third and fourth values are going to be 150. So by combining these four values together, we're very easily able to display an SVG graphics, one icon or one sprite at a time. And again, just as review, the first two values represent the xy coordinate ,or the starting coordinate of our crop, and the third and fourth values represent the width and height. And again, as we've mentioned before in a previous lesson, these values do not determine the scale of our object, they just determine what portion of that object we would show, if we were showing it at 100%. The width and height of our SVG, on the other hand, will scale everything once we've applied that viewbox. But hopefully that helps you to understand a little bit more about the viewbox attribute and as we move forward in the next lesson, we're going to use this viewbox to show the icon that we want to see in the browser window. So thank you for watching and I'll see you in the next lesson.