What Is the Default SVG Viewbox
What Is the Default SVG Viewbox?
✍: FYIcenter.com
The "viewBox" attribute in the "svg" element is optional.
If it is not specified, the default Viewbox will be the same
as the Viewport.
Here is an HTML document, viewbox-default.html, that has a SVG image with the default viewbox:
<html><body>
<div style="width: 400px; height: 300px; background-color: lightgrey;">
<svg xmlns="http://www.w3.org/2000/svg"
style="background-color: #ffffff"
width="300" height="200"
preserveAspectRatio="none">
<ellipse cx="0" cy="0" rx="75" ry="100"
stroke="blue" stroke-width="20" fill="none"/>
</svg>
</div>
</body></html>
When you open the above HTML file, viewbox-default.html, in a Web browser, you see a portion of the ellipse object inside the area from (0,0) to (300,200) in the Object Coordinate system being mapped to the Viewport:
Note that when using the default Viewbox, which is set to be same as the Viewport, only the lower right portion of graphical objects is displayed, because the Viewport always starts at (0,0), and extends in positive x and y directions.
⇒ What Is the Default SVG Viewport
⇐ Define SVG Viewbox-Viewport Mapping
2023-02-03, 1119🔥, 0💬
Related Topics:
