In this quick SVG viewport and viewBox tutorial, we’re going to break down exactly what viewport and
viewBox are in SVG for the web. You’ll learn:
- The difference between the viewport and
- The aspects of your SVGs you can control with each
- How they are each applied
If you literally break down the word “viewport” you’ll get a hint as to its role in SVG; it creates a “port” through which you can “view” a section of an SVG. You can imagine this as being something akin to a porthole window through which you can see the world beyond.
As with a window, the size of the viewport determines how much you can see, but it doesn’t define the size of whatever might be visible through that viewport. What’s on the other side could theoretically be any size at all.
For example, you might have a shape in your graphic that is
100px, but if you set the SVG viewport to
50px you’ll only see a portion of that shape. The viewport size is set by adding
height attributes to the
svg element, like so:
In the first SVG we see the entire
100px circle, but in the second SVG when we set our viewport size to
50px we only see a quarter of the circle.
viewBox can be thought of as much like the viewport but with two extra features: it can “pan” and it can “zoom”. Building on the “looking through glass” analogy, if the viewport is like a window, the
viewBox is like a telescope.
Let's talk about the SVG zoom. We control the
viewBox by adding it as an attribute to the
svg element, with a value comprising four space separated numbers:
viewBox = <min-x> <min-y> <width> <height>
The first two numbers define the position of the
viewBox, which we’ll think of as “panning”. The last two numbers define the dimensions of the
viewBox, which we’ll think of as “zooming”.
Note: as well as the
svg element, the
viewBox attribute can also be used on the elements
We’ll start by looking at “zooming”, which we can do with the last two
height respectively. We’ll leave the first two parameters at
0 0 for now.
If those last two parameters have the same dimensions as the viewport, there’s no zooming in or out so nothing changes. Take a look SVG number 3 for example:
But if we make those two numbers larger than the viewport dimensions we’ll effectively zoom out, and if we make them smaller we’ll zoom in.
In SVG number 4 in the example above we’ve set the
100, which is double the size of our viewport. This “zooms out” and shows double the content, thereby again revealing the entire circle.
In the fifth SVG our
viewBox is set to a
25, which is half the size of our viewport. This SVG viewBox zoom “zooms in”, showing half the amount of content.
The first two
viewBox parameters allow you to “pan” by setting where the upper left corner of the
viewBox should be. The first number controls the horizontal position, and the second controls the vertical position.
- To pan right, increase the first number.
- To pan left, decrease the first number.
- To pan down, increase the second number.
- To pan up, decrease the second number.
Take a look at how this panning works in this example. To remind you, SVG number 3 has a
50 viewport, the
viewBox is added but with no panning or zooming. Number 6 is the same, but panned to the right and down:
Panning and Zooming Together
You can, of course, both pan and zoom at the same time, by using all four parameters at once, for example:
When Using viewBox, Set Your Viewport
Whenever you use the
viewBox attribute, remember to set your viewport dimensions too. If you don’t, they’ll default to 100% and you’ll likely have an oversized graphic:
SVG ViewBox Explained In a Nutshell
Let’s boil everything down into some bullet points:
- The viewport is like a window you look through to see an SVG’s content.
viewBoxis similar to the viewport, but you can also use it to “pan” and “zoom” like a telescope.
- Control the viewport via
heightparameters on the
- Control the viewBox by adding the attribute
svgelement. It can also be used on the elements
viewBoxattribute’s value is comprised of four space separated parameters.
- The first two
viewBoxparameters control “panning” and the last two control “zooming”.
- Increase the first parameter to “pan” right, decrease it to “pan” left.
- Increase the second parameter to “pan” down, decrease it to “pan” up.
- Make the
viewBoxdimensions, i.e. the last two parameters, larger than those of the viewport to “zoom out”, and smaller to “zoom in”.
I hope that helps clarify the sometimes murky waters of SVG
viewBox. Happy SVG creating!
Where To Find Top SVG Icons In 2021
You know the basics of SVG viewport and SVG viewBox. We've covered what is a viewBox and how to adjust the SVG zoom and other parameters.
Now, are you wondering where to get professional SVG icons to use in your projects? Check out Envato Elements.
This subscription-based marketplace gives you unlimited SVG icons downloads. This is a great offer if you're a programmer, web designer or digital artist. You'll get unlimited access to web templates, WordPress themes, CMS templates, stock photo and more!
Learn More about SVG and Web Design
We've done SVG viewBox explained, everything about SVG viewBox zoom parameters and more. If you'd like to learn more about SVG for web design, these are great resources.
- SVGHow to Hand Code SVGKezz Bracey
- SVGSVG for Web Designers in 60 SecondsKezz Bracey
- SVGHow to Use “animateTransform” for Inline SVG AnimationKezz Bracey
- SVGSVG Files: From Illustrator to the WebIan Yates
- SVGHow to Enhance Your Website Layouts With SVG ShapesGeorge Martsoukos
- SVGAnimate an Icon With SVGator, Figma and Envato ElementsKezz Bracey
- SVGHow to Make an Animated Beating Heart with SVGIan Yates
- AccessibilityAccessible SVG: Methods for Adding Alternative ContentCarie Fisher
Editorial Note: This post has been updated with contributions from Maria Villanueva. Maria is a staff writer with Envato Tuts+.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post