I am having a difficult time understanding how the third and fourth numbers of an svg's viewbox="0 0 100 100" controls the "zoom". In all tutorials I've seen from the Internet so far, all examples demonstrate a situation where (svg-viewport-width/svg-viewbox-3rd-number) == (svg-viewport-height/svg-viewbox-4th-number). Then the examples say this is analogous to the zoom.
My problem is I don't understand how to predict the behaviour when (svg-viewport-width/svg-viewbox-3rd-number) != (svg-viewport-height/svg-viewbox-4th-number). And I haven't yet found a good explanation online for this.
If the 3rd and 4th numbers of viewBox are indeed used for zoom, then my question is why are two numbers necessary? In most applications, zoom is provided as a single number. People will request, "I would like to zoom in 15%" or "increase magnification by 100x". This leads me to believe the 3rd and 4th numbers aren't actually used for just zooming.
Can anyone help me better understand how to use those 3rd and 4th numbers of the viewBox?
The four numbers in the SVG viewbox are x,y, width and height. It establishes the unit system for your SVG. Here is what happens to a 100 x 50 rect drawn at 50,50 in a 400 x 400 pixel SVG when you halve the size of the width and height of the viewBox separately and together.
<svg width="400px" height="400px" viewBox="0 0 400 400">
<animate attributeName="viewBox" values="0 0 400 400; 0 0 200 400; 0 0 400 400;0 0 400 200;0 0 400 400;0 0 200 200;" dur="15s" fill="freeze" />
<rect x="50" y="50" width="100" height="50" fill="blue" stroke-width="2" stroke="red"/>
</svg>"Wait a minute", you might think, "why does halving the size of my viewBox not stretch the width or height of my shape when I'm only changing one of the width or the height? That doesn't make sense." And in fact, you're right. There is a silent default (of preserveAspectRatio) in your SVG element that preserves the aspect ratio of your shapes when the viewBox changes.
If you override this default by adding preserveAspectRatio="none" to your SVG - the animation behaves as you might expect - stretching the x and y dimensions of your shape separately when you change the width and height separately.
<svg width="400px" height="400px" viewBox="0 0 400 400" preserveAspectRatio="none">
<animate attributeName="viewBox" values="0 0 400 400; 0 0 200 400; 0 0 400 400;0 0 400 200;0 0 400 400;0 0 200 200;" dur="15s" fill="freeze" />
<rect x="50" y="50" width="100" height="50" fill="blue" stroke-width="2" stroke="red"/>
</svg>