with a large viewBox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewBox
<svg viewbox= "min-x min-y width height" xmlns="http://www.w3.org/2000/svg">
|
|
with relative unit such as percentage, the visual size
of the square looks unchanged regardless of the viewBox
with a large viewBox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewBox |
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%"
fill="gray"/>
<circle cx="50%" cy="50%" r="4" fill="white"/>
</svg>
 |
with relative unit such as percentage, the visual size
of the square looks unchanged regardless of the viewBox` with a small viewBox the circle looks large as it is using user units for the r attribute: 4 resolved against 10 as set in the viewBox |
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="#444"/>
<circle cx="50%" cy="50%" r="4" fill="white"/>
</svg>
 |
The point of coordinate 0,0 is now in the center of the viewport,
and 100% is still resolved to a width or height of 10 user units so the
rectangle looks shifted to the bottom/right corner of the viewport With the point of coordinate 0,0 in the center of the viewport the value 50% is resolve to 5 which means the center of the circle is in the bottom/right corner of the viewport. |
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="#444"/>
<circle cx="50%" cy="50%" r="4" fill="white"/>
</svg>