Categories:
Cloud (204)
Entertainment (11)
Facebook (43)
General (50)
Life (31)
Programming (64)
Technology (398)
Testing (4)
Tools (488)
Twitter (5)
Wearable (26)
Web Design (44)
Collections:
Other Resources:
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 a HTML document, viewport-default.html. It has a SVG image with the default Viewport included in a 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, 339🔥, 0💬
Popular Posts:
What is "Microsoft SharePoint Server Colleague Import Add-in" COM Add-in in Outlook 2013? Should I d...
How to download and install SoapUI on Windows systems? Here are the steps to download and install So...
How to fix the Microphone Permissions error with making a call with Messenger in iPhone? If your Mic...
How to install IPython in a Conda environment? If you want to install IPython in a specific Conda en...
"Muss i denn" is a German folk song in the Swabian German dialect. The present form dates back to 18...