Advertisement
  1. Web Design
  2. SVG
Webdesign

SVG Viewport and viewBox (For Complete Beginners)

by
Difficulty:BeginnerLength:ShortLanguages:

In this quick tip we’re going to break down exactly what viewport and viewBox are in SVG. You’ll learn:

  • The difference between the viewport and viewBox
  • The aspects of your SVGs you can control with each
  • How they are each applied

Let’s begin!

SVG Viewport 

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.

The SVG viewport is like a porthole window whose size determines what you can see through it
The SVG viewport is like a porthole window whose size determines what you can see through it

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 by 100px, but if you set the viewport to 50px by 50px you’ll only see a portion of that shape. The viewport size is set by adding width and height attributes to the svg element, like so:

In the first SVG we see the entire 100px by 100px circle, but in the second SVG when we set our viewport size to 50px by 50px we only see a quarter of the circle.

SVG viewBox

The 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.

The SVG viewBox is very similar to the viewport but it can also pan and zoom like a telescope
The SVG viewBox is very similar to the viewport, but it can also pan and zoom like a telescope

viewBox Parameters

We control the viewBox by adding it as an attribute to the svg element, with a value comprising four space separated numbers:

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 symbol, marker, pattern and view.

Zooming

We’ll start by looking at “zooming”, which we can do with the last two viewBox parameters: width and 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 viewBox width and height to 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 width and height of 25, which is half the size of our viewport. This “zooms in”, showing half the amount of content.

Panning

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 by 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:

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.
  • The viewBox is similar to the viewport, but you can also use it to “pan” and “zoom” like a telescope.
  • Control the viewport via width and height parameters on the svg element.
  • Control the viewBox by adding the attribute viewBox to the svg element. It can also be used on the elements symbolmarkerpattern and view.
  • The viewBox attribute’s value is comprised of four space separated parameters.
  • The first two viewBox parameters 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 viewBox dimensions, 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 viewport and viewBox. Happy SVG creating!

More SVG Basics

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.