SVG viewBox Attribute

• Create an SVG
• SVG Rectangles

The viewBox attribute is one of the most important and powerful SVG attributes. It unlocks true resolution-independence and gives you precise control over how your drawings scale.

But First, What is the SVG Viewport?

Every SVG element has a viewport. This is the rectangular area visible in the browser. The width and height attributes on the svg element define this viewport in pixels. So it looks something like this:

<svg width="300" height="200" ... >
    ...
</svg>

You can think of it like a window. The viewport is the size of the window, but what you see through the window is controlled separately.

What is the viewBox?

The viewBox attribute defines the internal coordinate system used to draw things. It takes four values:

viewBox="min-x  min-y  width  height"

• min-x and min-y: The top-left corner of the coordinate system (almost always 0 0).
• width and height: The width and height of the internal coordinate space.

We add it to the svg tag, so it looks something like this:

<svg ... viewBox="0 0 300 200" ... ">
    ...
</svg>

The browser then stretches or shrinks that internal coordinate space to fill the SVG viewport (the actual width and height defined for the image on the page). This effectively decouples the drawing's dimensions from the size of the container, allowing the graphic to remain resolution-independent regardless of the display size.

Because the browser calculates the scaling from your internal coordinates to the SVG viewport on the fly, the graphic remains perfectly crisp at any size, from a tiny icon to a massive billboard.

Example 1: viewBox Matching the Viewport

Consider the following viewport and viewBox:

width="300" height="200" viewBox="0 0 300 200"

When the viewBox dimensions match the physical width and height of the svg element, everything works with a 1-to-1 pixel mapping.

Here it is in action:

Here, we created a circle and a rectangle. Their coordinates were such that the circle appears to be in the center of the rectangle. We set both of these shapes to a size that fits inside the viewBox coordinate system. If the viewport and the viewBox were different sizes, the browser would scale the viewBox to fit the viewport. But in this case, the viewBox is the same size as the viewport, so no scaling occurs.

Example 2: viewBox Smaller than the Viewport (Zooming In)

Now let's look at what happens when the viewBox is smaller than the SVG viewport size. Suppose we have the following viewport and viewBox:

width="300" height="200" viewBox="0 0 150 100"

Here, the SVG viewport is 300×200px, but the viewBox is only 150×100 units. This means every unit in our coordinate system maps to 2 pixels on screen.

Here's our full SVG code:

When this is rendered in a browser, it looks the same as the previous example. But it's not. The shapes are actually smaller (we've reduced their size by half), but they appear larger because the viewBox is smaller and it's been scaled up to fit the viewport. We do get a small clue by looking at the border of the rectangle. The border is 2 units wide, but it appears to be 4 pixels wide in this example.

You'll notice that we've also reduced the size of the shapes to fit inside the smaller viewBox dimensions. If we hadn't done that, the shapes would have been clipped.

So just to be clear, we reduced the size of the shapes and the viewBox. But we left the viewport the same size. The browser therefore scaled the viewBox to fit the viewport, effectively zooming in.

Example 3: Original viewBox Settings, But Smaller Shapes

What happens if we keep the viewBox the same size, but reduce the size of the shapes?

In this case, the shapes are smaller than the viewBox, so they appear smaller in the viewport. The browser still scales the viewBox to fit the viewport, but because the shapes are smaller, they appear smaller in the viewport.

Example 4: Smaller viewBox, But Same Sized Shapes

Now let's do the opposite. Let's keep the shapes the same size, but make the viewBox smaller:

The shapes are clipped because they are larger than the viewBox. In this case, the viewport is larger than the viewBox, and so the viewBox is scaled to fit the viewport, but the shapes are still larger than the viewBox, so they are clipped.

Let's reduce the viewport size and see what happens:

Basically the same result, just smaller.

The main thing to remember from all this, is that the viewBox is the internal coordinate system of the SVG, and the viewport is the actual size of the SVG on the page. The browser scales the viewBox to fit the viewport, but the shapes are still drawn in the viewBox coordinate system.

Why viewBox Makes SVGs Truly Scalable

The real power of viewBox is when you combine it with CSS. If you set an SVG's width to 100% in your stylesheet and give it a viewBox, the SVG will expand to fill its container perfectly at any screen size, without any distortion.

You can do this easily by adding the following CSS to your stylesheet:

/* CSS */
svg {
    width: 100%;
    height: auto;
}

Here's an example:

This is the standard approach for making SVG icons and illustrations fully responsive. You define your shapes once inside the viewBox coordinate system, and the browser handles all the scaling automatically.

• Create an SVG
• SVG Rectangles