Detailed explanation of viewBox:
svg has no boundaries. The svg canvas is only used to display the content of a certain range in the svg world, and the content that exceeds the range of the svg canvas will be blocked. By default, the svg canvas displays a rectangular field of view of the width*height area of the origin coordinates in the world coordinates by default.
We can modify the default display configuration through viewBox, viewBox is composed of 4 points, viewBox="x, y, w, h"; where x, y are used to define the position of the svg canvas in world coordinates, by modifying x, y can move the position of the canvas in world coordinates. And w, h is the view area that defines the svg canvas; by default viewBox="0,0,width,height"
When w<width, h<height, it is equivalent to narrowing the field of view and making the field of view smaller, but the actual displayed area does not change; this will cause the displayed graphics to become larger and the displayed area to become smaller.
When w>width, h>height, it is equivalent to zooming out the field of view and making the field of view larger, but the actual displayed area does not change; this will cause the displayed graphics to become smaller and the displayed area to become larger.
sample code
<svg width="150" height="150" viewBox="0 0 3000 3000" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%"/>
<circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>
<svg width="150" height="150" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%"/>
<circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>
<svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%"/>
<circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>