What is the role of View-box in SVG and what if we don't provide it?
Is it important?
What is the role of View-box in SVG and what if we don't provide it?
Is it important?
viewBox is the difference between your SVG being responsive and not.
With a viewBox if you rescale your canvas, the contents will rescale too, without it the contents will stay the same size and you'll either be able to see more or less of it kind of like putting a picture frame over a picture.
The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. The value of the viewBox attribute is a list of four numbers: min-x, min-y, width, and height. The numbers separated by whitespace and/or a comma, which specifies a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element
This is referenced from MDN docs. Basically, you are setting the coordinates and width and height of your SVG. The syntax is - viewBox = "min-x min-y width height". The purpose of viewBox is to select that part of the your SVG plane, that should actually be rendered onto the page.
Without the viewBox tag and without any width or height specified, the svg won't scale. Here's an example -
<!--This one is without a viewbox which wont scale-->
<svg>
<path d="M 15,5 25,27.5 5,27.5 z"/>
</svg>
<!--This one is with a viewbox which will scale. Check by opening in full page-->
<svg viewBox="0 0 200 200">
<path d="M 15,5 25,27.5 5,27.5 z"/>
</svg>