Define SVG Viewbox-Viewport Mapping

Q

How to define the SVG Viewbox-Viewport Mapping?

✍: FYIcenter.com

A

The Viewbox-Viewport Mapping can be defined with attributes of the "svg" element:

1. Use <svg viewBox="{view_min_x} {port_min_y} {view_width} {view_height}" .../> attribute to set the Viewbox area which runs from ({view_min_x}, {view_min_y}) to ({view_min_x}+{view_width}, {view_min_y}+{view_height}). For example the following "svg" element sets the Viewbox area in the Object Coordinate System at (0,-100) with a size of (75,100):

<svg viewBox="0 -100 75 100" ...>
  ...
</svg>

2. Use <svg width="{port_width}" height="{port_height}" .../> attributes to set the Viewport area which runs from (0,0) to ({port_width}, {port_height}). For example the following "svg" element sets the Viewport area in the Canvas Coordinate System at (0,0) with a size of (300,200):

<svg width="300" height="200" ...>
  ...
</svg>

3. Use <svg preserveAspectRatio="{keyword}" .../> attribute to flag whether or not the Viewbox-Viewport mapping should respect the aspect ratio. For example the following "svg" element says that the aspect ratio is not respected:

<svg preserveAspectRatio="none" ...>
  ...
</svg>

Here is an HTML document, viewbox.html, that has a SVG image with the Viewbox-Viewport mapping specified as "svg" attributes:

<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" 
    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>
</body></html>

When you open the above HTML file, viewbox.html, in a Web browser, you see a portion of the ellipse object inside the Viewbox being mapped to the Viewport:

Note that the grey area represents the HTML "div" tag area, where the SVG canvas is displayed and aligned to the top left corner.

⇒ What Is the Default SVG Viewbox

⇐ What Is SVG Viewbox-Viewport Mapping

⇑ SVG Coordinates, Size and Viewport

⇑⇑ SVG (Scalable Vector Graphics)

2023-08-17, 750🔥, 0💬