viewBox enables you to have a custom co-ordinate system within your defined SVG view port.

Lets say, you have the following code:

<svg width="500" height="200" viewBox="0 0 50 20" >
    <rect x="20" y="10" width="10" height="5"
          style="stroke: #000000; fill:none;"/>
</svg>

You can see that the view port is defined to have a width of 500px (px is the default unit, when you don't specify any), and a height of 200px. But now, because I have specified a viewBox attribute, this changes things.

According to MDN:

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, taking into account attribute preserveAspectRatio.

In other words, going with the above example, the viewBox starts at 0, 0; and has a width of 50; and a height of 20. So an amount of 500px of view port width is occupied by an amount of 50 units of view box width; so that means each unit in the view box corresponds to an amount of (500px/50 OR 200px/20) 10px. So the above rectangle is going to have a width of (10 x 10px) 100px, and a height of (5 x 10px) 50px; and its starting co-ordinates (the top-most left corner of the rectangle) will be at (20 x 10px, 10 x 10px) -> (200px, 100px).

That's a short brief on viewBox.

In this example you can see the aspect ratios, for both the view box, and the view port, are the same: 500/200 == 50/20; in the cases when they are not, the attribute preserveAspectRatio kicks in.

I refer you to this article: tutorials.jenkov.com/svg/svg-viewport-view-box.ht… ... from where the above example is borrowed from; which goes on in great detail about viewBox, preserveAspectRatio, and all the different use cases with the corresponding attributes.