What Is the Default SVG Viewport
What Is the Default SVG Viewport?
✍: FYIcenter.com
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
2023-02-03, ∼1577🔥, 0💬
Related Topics:
