The SVG ViewBox
Updated over a week ago

Svg and its ViewBox

SVGs (Scalable Vector Graphic) are data and/or mathematical calculations based elements. The Browser renders and designs them in real time. Their being numbers calculated according specific parameters (width, diameter, scale, etc.) allows them to be enlarged or reduced without any loss of quality. SVGs are "on a VECTOR basis".

What really distinguishes a vector form is that it is made up of numbers expressed in parameters, which define the shape in its characteristics. So if the numbers change the shape changes.

This is a SVG with the drawing of a circle:


The ViewBox is the display area of a

and represents the portion of the box that shows the elements. It is comparable to the width and height of a jpg or png image, but on a parametric basis - therefore managed by numbers.

viewBox="0 0 600 600"

The BoxView tab collects the options concerning the basic modeling of your SVG and you can find it in all SVG type widgets.

  1. Define the Width / Height ratio of your svg

  2. Edit the maxWidth (Content Width... like you would do for the image widget)

  3. Optionally you can also change the maxHeight (Content Height), but remember that width and height are related.

NOTE: by default use 600 x600px.

Did this answer your question?