What Is the Default SVG Viewport?

The "width" and "height" attributes in the "svg" element are optional. If them are not specified, the default Viewport will be calculated based on the enclosing area provided by hosting HTML element.

More precisely, if "width" is specified, and "height" is not specified, the height of the Viewport will be calculated as below to respect the aspect ratio of the SVG image.

viewport_height = viewport_width * viewbox_height / viewbox_width 

If "width" is not specified, the height of the Viewport will be set to the maximum width of enclosing HTML element.

Here is an HTML document, viewport-default.html. It has a SVG image with the default Viewport included in an HTML "div" element, which has a maximum width of 400px:

<html><body>
<p>Enclosed in a "div" element:</p>
<div style="max-width: 400px; max-height: 300px; background-color: lightgrey;">
  <svg xmlns="http://www.w3.org/2000/svg"
    style="background-color: #ffffff"
    viewBox="0 -100 75 100" 
    preserveAspectRatio="none">
    <ellipse cx="0" cy="0" rx="75" ry="100" 
      stroke="blue" stroke-width="20" fill="none"/>
  </svg>
</div>
<p>Continue after "div".</p>
</body></html>

When you open the above HTML file, viewport-default.html, in a Web browser, you see a portion of the ellipse object inside the Viewbox being mapped to a Viewport of 400px x 533px:

Here is how the Viewport width and height are calculated:

viewport_width  = div_width 
                = 400px 

viewport_height = viewport_width * viewbox_height / viewbox_width 
                = 400px * 100 / 75
                = 533px

Note that the SVG image height 533px is larger than the maximum height of the "div" element. This is why the "Continue after 'div'" text is printed over the lower part of the SVG image.

⇒ Default SVG Viewport in HTML "P" Tag

⇐ What Is the Default SVG Viewbox

⇑ SVG Coordinates, Size and Viewport

⇑⇑ SVG (Scalable Vector Graphics)