How To Create Viewport In SVG

In SVG, the area of the canvas that your document intends to use is called the viewport. You establish the size of this viewport with the width and height attributes on the <svg> element. The values of these attributes can be simply a number, whose unit is in pixels. You may also specify width and height as a number followed by a different unit identifiers. You can also specify user coordinates for a viewport using a ViewBox. The different ways to create viewport in SVG are as follows.

Table of Contents

With Specifying Width and Height on SVG Element

You can create viewport in SVG element with specifying width and height using different types of unit identifiers as follows.

Using Custom Unit Identifiers

The different types of unit identifiers can be used to specify width and height on SVG to create viewport are em : the size of the default font and is usually equivalent to the height of a charactor, ex : the height of the letter x, px : the number of pixels, pt : point which is a 1/72 of an inch, pc : picas which is a 1/6 of an inch, cm : unit in centimeters, in : unit in Inches.

Following is an example which uses “mm” as unit specifiers for with and height properties of <svg> element, which creates a viewport of 60mm x 30mm size. The rectangle created within <svg> elment is smaller than the viewport, so it fits within a viewport.

<svg width=”60mm” height=”30mm”>
<rect width=”500″ height=”500″ fill=”pink”/>
<rect x=”10″ y=”10″ width=”200″ height=”90″
style=”fill: none; stroke: blue;stroke-width:2;” />
</svg>

Here is an another example where the rectangle created within <svg> elment is larger than the viewport, so it does not fits within a viewport.

<svg width=”60mm” height=”30mm”>
<rect width=”500″ height=”500″ fill=”pink”/>
<rect x=”10″ y=”10″ width=”200″ height=”120″
style=”fill: none; stroke: blue;stroke-width:2;” />
</svg>

You can also use different units for width and height as unit specifiers as given on the example below.

<svg width=”7.2cm” height=”130pt”>
<rect width=”500″ height=”500″ fill=”pink”/>
<rect x=”10″ y=”10″ width=”250″ height=”150″
style=”fill: blue; stroke: red;” />
</svg>

Using Default Coordinates

If you do not specify any unit specifiers on your <svg> element the unit pixel(px) is used as default, where the viewer sets up a coordinate system when x-coordinate increases, you will go to the right, and when y-coordinate increases, you will go to down. The upper left corner of the viewport is defined to have an x- and y-coordinate of zero, which is written as (0, 0).
Following is an example of specifying properties of SVG elements using default coordinates, which is in pixel(px).

<svg width=”280″ height=”180″>
<rect width=”500″ height=”500″ fill=”pink”/>
<circle r=”80″ cx=”130″ cy=”90″
style=”fill: blue; stroke: red; stroke-width:2;” />
</svg>

With Using a viewBox

Using a viewbox is the another way of specifying user coordinates for a viewport. To create a viewbox you will set the viewBox attribute on the <svg> element. The value of the viewBox attribute is a list of four numbers <min-x>, <min-y>, <width> and <height> separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element. Each single unit specified in viewbox attribute assigns one-sixteenth of a centimeter.

Using viewbox attribute, you can also specify that a given set of graphics stretch to fit a particular container element. All elements that establish a new viewport have attribute viewBox. A negative value for <width> or <height> generates error and a value of zero disables rendering of the element.

Example 1:

Following is an example of using viewbox attribute in <svg>, which establish a new co-ordinate system with specifying 10 units per “cm” for x-axis and 16 units per “cm” for y-axis.

<svg width=”8cm” height=”5cm” viewBox=”0 0 80 80″>
<rect width=”500″ height=”500″ fill=”pink”/>
<circle r=”8″ cx=”45″ cy=”20″ style=”stroke: black; fill: none;”/>
<rect x=”35″ y=”28″ width=”20″ height=”20″
style=”stroke: black; fill: none;” />
<rect x=”38″ y=”48″ width=”5″ height=”10″
style=”stroke: black; fill: none;” />
<rect x=”48″ y=”48″ width=”5″ height=”10″
style=”stroke: black; fill: none;” />
</svg>

If you double the numbers used on width and height properties of viewbox, the number of units per “cm” for each axis also increases which makes graphic element created on SVG smaller on size.

<svg width=”8cm” height=”5cm” viewBox=”0 0 160 160″>
<rect width=”500″ height=”500″ fill=”pink”/>
<circle r=”8″ cx=”45″ cy=”20″ style=”stroke: black; fill: none;”/>
<rect x=”35″ y=”28″ width=”20″ height=”20″
style=”stroke: black; fill: none;” />
<rect x=”38″ y=”48″ width=”5″ height=”10″
style=”stroke: black; fill: none;” />
<rect x=”48″ y=”48″ width=”5″ height=”10″
style=”stroke: black; fill: none;” />
</svg>

If you half the numbers used on width and height properties of viewbox, the number of units per “cm” for each axis also decreases which makes graphic element created on SVG larger on size.

<svg width=”8cm” height=”5cm” viewBox=”0 0 40 40″>
<rect width=”500″ height=”500″ fill=”pink”/>
<circle r=”8″ cx=”45″ cy=”20″ style=”stroke: black; fill: none;”/>
<rect x=”35″ y=”28″ width=”20″ height=”20″
style=”stroke: black; fill: none;” />
<rect x=”38″ y=”48″ width=”5″ height=”10″
style=”stroke: black; fill: none;” />
<rect x=”48″ y=”48″ width=”5″ height=”10″
style=”stroke: black; fill: none;” />
</svg>

Example 2:

Following is an another example of ViewBox which illustrates the use of the viewBox attribute on the outermost <svg> element to specify that the SVG content should stretch to fit bounds of the viewport.

Here the triangle created on SVG below fits within viewport created with viewbox.

<svg width=”300px” height=”200px” viewBox=”0 0 1500 1000″>
<rect x=”0″ y=”0″ width=”1500″ height=”1000″
fill=”#00aaff” stroke=”blue” stroke-width=”12″/>
<polygon points=”750,50 50,950 1450,950″ fill=”red”/>
</svg>

If width and height of the SVG element reduced, the element within viewbox also resizes to fit on a viewbox as given on the example below.

<svg width=”150px” height=”100px” viewBox=”0 0 1500 1000″>
<rect x=”0″ y=”0″ width=”1500″ height=”1000″
fill=”#00aaff” stroke=”blue” stroke-width=”12″/>
<polygon points=”750,50 50,950 1450,950″ fill=”red”/>
</svg>