SVG - View Box

About

The Viewbox attribute specifies:

  • a boundary box in which only the inside elements are visible.
  • and how to resize / fit its content when the viewport is changing.

_

In conjunction with the preserveAspectRatio attribute, it provides the capability to stretch an SVG viewport to fit a particular container element.

Syntax

The value of the ‘viewBox’ attribute is a list of four numbers separated by whitespace and/or a comma

min-x min-y width height

where:

  • <min-x>, (>0) ?
  • <min-y>, (>0) ?
  • <width>, width of the viewport rectangle in abstract user units
  • and <height>, height of the viewport rectangle in abstract user units

It specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element

Default

Without viewbox, the default viewbox value is browser dependent and is generally:

0 0 300 150

Demo:

  • A circle of 50 rayon located at (60,60)
<svg style="border: 1px solid #D5D8CB;">
    <circle cx="60" cy="60" r="50" fill="#D5D8CB" stroke="#ECDCC6" stroke-width="5"/>
</svg>
  • We calculate the SVG width and height dimension to show the view box
let svg = document.getElementsByTagName("svg")[0].getBoundingClientRect();
console.log("The default viewbox of the SVG (minus 2 times a border of 1) for this browser is "+(svg.width-2*1)+" x "+(svg.height-2*1));
  • Output where you can see the default view box and its calculation

Standalone: Setting the height or width

Without the viewbox

If you set the width or the height, you will expand or cut the viewport depending on the value of the default viewbox

Example:

  • with a 50px width, the circle didn't feet in the view port 0 0 50 100 and is cut
<svg width="50px" style="border: 1px solid #D5D8CB;">
    <circle cx="60" cy="60" r="50" r="50" fill="#D5D8CB" stroke="#ECDCC6" stroke-width="5"/>
</svg>
  • with a 150px width, the circle feet in the view port 0 0 150 100 and is not cut
<svg width="150px" style="border: 1px solid #D5D8CB;">
    <circle cx="60" cy="60" r="50" fill="#D5D8CB" stroke="#ECDCC6" stroke-width="5"/>
</svg>

With the viewbox

With the viewbox, the circle stretches and fits into the given height

<svg height="50px" viewBox="0 0 150 150" style="border: 1px solid #D5D8CB;">
    <circle cx="60" cy="60" r="50" fill="#D5D8CB" stroke="#ECDCC6" stroke-width="5"/>
</svg>

In a container: preserveAspectRatio

In a container, the preserveAspectRatio attribute control how the svg will fit in it.

none without width and height

With preserveAspectRatio value of none without any CSS definition, the SVG will starts from the container width, conserve its shape and then overflow the container on the y axis.

<div style="width:300px;height:100px">
    <svg viewBox="0 0 150 150" preserveAspectRatio="none" style="border: 1px solid #D5D8CB;">
        <circle cx="60" cy="60" r="50" fill="#D5D8CB" stroke="#ECDCC6" stroke-width="5"/>
    </svg>
</div>

none with CSS width and height

To constraint the shape to stay in its container, you need to tell CSS that the value of width and hieght should be calculate from the container. below we have added the width:100%;height:100% CSS properties on the SVG.

With a preserveAspectRatio value of none, the shape will fit but without preserving the ratio between the width and height.

<div style="width:300px;height:100px">
    <svg viewBox="0 0 150 150" preserveAspectRatio="none" style="width:100%;height:100%;border: 1px solid #D5D8CB;">
        <circle cx="60" cy="60" r="50" fill="#D5D8CB" stroke="#ECDCC6" stroke-width="5"/>
    </svg>
</div>

xMidYMid meet

With a preserveAspectRatio value of xMidYMid meet (the default, therefore not specified), the shape will fit and the the ratio will be preserved between the width and height, preserving the shape of the geometry.

<div style="width:300px;height:100px">
    <svg width="400px" viewBox="0 0 150 150" style="width:100%;height:100%;max-width:200px;border: 1px solid #D5D8CB;">
        <circle cx="60" cy="60" r="50" fill="#D5D8CB" stroke="#ECDCC6" stroke-width="5"/>
    </svg>
</div>

Note that setting:

  • the width on the svg has no impact at all
  • the max-width permits to constraint the width (same for max-height)

More preserveAspectRatio

Below is a simple illustration on the effect of preserveAspectRatio based on the possible values from the specification

_

Example with the value xMinYmin meet

<div style="width:400px;height:100px">
    <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 150 150" style="width:100%;height:100%;border: 1px solid #D5D8CB;">
        <circle cx="60" cy="60" r="50" fill="#D5D8CB" stroke="#ECDCC6" stroke-width="5"/>
    </svg>
</div>

Transformation

Unlike the transform, the automatic transformation that is created due to a ‘viewBox’ does not affect the following attributes on the element with the ‘viewBox’ attribute.

  • the coordinates ‘x’, ‘y’,
  • the dimension ‘width’ and ‘height’

On the other hand, like the transform attribute, it does establish a new coordinate system for all other attributes and for descendant elements.

minx and miny

On an outermost svg element, a translate transformation will be needed if the ‘viewBox’ attributes specifies values other than zero for <min-x> or <min-y>.

Documentation / Reference


Powered by ComboStrap