The SVG ViewBox

Svg and its ViewBox:

SVG

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:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="300px" viewBox="0 0 600 300" xml:space="preserve">
<g>
<circle fill="#333333" stroke="#000000" strokeWidth="5px" cx="100" cy="100" r="300"/>
</g>
</svg>

ViewBox

The ViewBox is the display area of a <svg> 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? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us