Use an ellipse instead of a circle with preserveAspectRatio="none"
By default, SVG elements preserve their aspect ratio, even when that means the coordinates are misplaced, i.e. the bottom right corder of the image does not correspond to the bottom right coordinate of the viewBox.
When you need to stretch the SVG to the available space, you'll need to use the preserveAspectRatio="none".
But then a circle won't be a circle anymore, but an ellipse.
How to make the SVG span to the full container while also being able to draw a circle?
Use an ellipse
Since either the horizontal or the vertical dimension is skewed, you need to "unskew" it by setting the rx ot the ry to a different value.
For example, if the viewBox's width is 150px but the element is only 100px wide, to draw a circle with 5px radius, use:
<ellipse cx="50" cy="50" rx="3.33" ry="5"/>
Why the 3.33?
actual radius = expected radius * (element size / viewport size)
5 * (100 / 150) = 3.33
Using this formula, you can programatically calculate the required radii for the ellipse to make it a circle.