How SVG View Box Works

viewBox=“0 0 64 64“

Preserve aspect ratio?

X Coordinate (pan left/right)Y Coordinate (pan up/down)View box width (zoom in/out horizontal)View box height (zoom in/out vertical)

Notes

Check out my SVG for web developers for a detailed explanation of this.
You can adjust the SVG "viewport" by dragging the bottom-right corner of the outlined container.

Hit the reset button and use the view box width and height sliders to resize the SVG. As you can see, the width and height aspect ratios will resize independently, and when your sliders do not maintain a 1:1 aspect ratio (like the original SVG), the SVG will look weird. This is because we have set the preserveAspectRatio attribute to none (which is NOT the default)
Hit the reset button again, click the Preserve Aspect Ratio checkbox and drag the view box width and height sliders. How does the SVG resize now? Are there any weird behaviors? Now that we are preserving the aspect ratio of the SVG (the default behavior when the property is unset), you will see that once you reach a certain width and height, the SVG no longer changes size, but rather position.