When you build an SVG, you build your own little world. And what's the point of creating something beautiful if you're not gonna take pictures of it and show people (note: I recognize I'm letting my inner millennial show here).
Within your <svg> tags, you can build your little world! It can be bursting with life and color and all the most beautiful things. But then, you have to decide what you want to show your friends by taking the pictures.
Think of the SVG's viewBox attribute as your camera lens. Which pieces of your world do you want to capture on your camera for people to see?
Take this image for example. This whole bakery might be what is inside the <svg> tag. But you don't really need to show people the entire bakery at this time, you just wanna zoom in on these tasty little donuts — the real star of the show!
So, when you think of an SVG, you should think that the actual SVG itself could potentially have an infinite canvas, but what us humans can actually see is what is within the viewBox that the developer has defined!
Your viewBox is what is in charge of zooming and panning your "camera lens" so we only show what we want to show.
The value of the viewBox attribute is a list of four numbers: min-x, min-y, width and height.
min-x and min-y are the top left corner of the viewBox and define it's position.
min-x: This will move your camera lens right and left — much like "trucking" in filmography.
min-y: This will move your camera lens up and down — much like "pedestal" in filmography.
width and height are set to the number on "units" that are visible inside of your viewBox. Changing these values will zoom in on our world!
width and height work off of each other, so you may need to work with both values depending on what you want to achieve.
There you have it! Now, with the power of viewBox attribute, you have to power to crop and zoom your SVG to show exactly what you want people to see. You might have also learned some new photography vocab as well that you can apply to your next Instagram story.
There is a great video on the viewBox attribute over here by DesignCourse.
And you can use a brilliant tool they've created to play around with the viewBox attribute on your own SVGs over here
Top comments (1)
can
viewBoxbe animated with<animate>?