SVG "preserveAspectRatio" Attribute

Q

How to use SVG "preserveAspectRatio" attribute to control aspect ratio?

✍: FYIcenter.com

A

If you want to control the aspect ratio in the Viewbox-Viewport mapping, you set the SVG "preserveAspectRatio" attribute to different values:

<svg preserveAspectRatio="xMidYMid meet" .../> - The default value. Respect the aspect ratio by scaling x-coordinate and y-coordinate together, so that the entire Viewbox is mapped inside the Viewport. The center point of the Viewbox is aligned to the center point of the Viewport.
<svg preserveAspectRatio="xMidYMid slice" .../> - Respect the aspect ratio by scaling x-coordinate and y-coordinate together, so that the entire Viewport filled. Any Viewbox points mapped to outside of the Viewport are sliced off. The center point of the Viewbox is aligned to the center point of the Viewport.
<svg preserveAspectRatio="xMinYMin meet" .../> - The default value. Respect the aspect ratio by scaling x-coordinate and y-coordinate together, so that the entire Viewbox is mapped inside the Viewport. The top left corner of the Viewbox is aligned to the top left corner of the Viewport.
<svg preserveAspectRatio="xMinYMin slice" .../> - Respect the aspect ratio by scaling x-coordinate and y-coordinate together, so that the entire Viewport filled. Any Viewbox points mapped to outside of the Viewport are sliced off. The top left corner of the Viewbox is aligned to the top left corner of the Viewport.
...
<svg preserveAspectRatio="none" .../> - Do not respect the aspect ratio. x-coordinate and y-coordinate are scaled independently, so that the entire Viewbox is mapped to the entire Viewport.

Here is an HTML document, preserve-aspect-ratio.html, that has 3 SVG images with different settings for the "preserveAspectRatio" attribute:

<html><body>
<div style="width: 750px; height: 250px; background-color: lightgrey;">

  <svg style="background-color: #ffffff"
    width="200px" height="200px" viewBox="0 150 400 100"  
    preserveAspectRatio="xMidYMid meet">

    <rect x="0" y="150" width="400" height="100" 
      stroke="red" stroke-width="1" fill="none"/>
    <text x="170" y="170" fill="red">Viewbox</text>
    <circle cx="200" cy="200" r="200" 
      stroke="black" stroke-width="10" fill="none"/>
    <text x="100" y="270" font-size="80" stroke="black">Object</text>
  </svg>

  <svg style="background-color: #ffffff"
    width="200px" height="200px" viewBox="0 150 400 100"  
    preserveAspectRatio="xMidYMid slice">

    <rect x="0" y="150" width="400" height="100" 
      stroke="red" stroke-width="1" fill="none"/>
    <text x="170" y="170" fill="red">Viewbox</text>
    <circle cx="200" cy="200" r="200" 
      stroke="black" stroke-width="10" fill="none"/>
    <text x="100" y="270" font-size="80" stroke="black">Object</text>
  </svg>

  <svg style="background-color: #ffffff"
    width="200px" height="200px" viewBox="0 150 400 100"  
    preserveAspectRatio="none">

    <rect x="0" y="150" width="400" height="100" 
      stroke="red" stroke-width="1" fill="none"/>
    <text x="170" y="170" fill="red">Viewbox</text>
    <circle cx="200" cy="200" r="200" 
      stroke="black" stroke-width="10" fill="none"/>
    <text x="100" y="270" font-size="80" stroke="black">Object</text>
  </svg>

</div>
</body></html>

When you open the above HTML file, preserve-aspect-ratio.html, in a Web browser, you see 3 SVG images rendered with 3 different settings for the "preserveAspectRatio" attribute.

Impact of 'preserveAspectRatio' Attribute Settings

As you can see, the impact of the "preserveAspectRatio" attribute can be summariezed as:

<svg preserveAspectRatio="... meet" .../> - The Viewbox is expanded in the shorter direction to match the aspect ratio of the Viewport.
<svg preserveAspectRatio="... slice" .../> - The Viewbox is truncated on the longer direction to match the aspect ratio of the Viewport.
<svg preserveAspectRatio="none" .../> - Do not change the Viewbox. and shrink or stretch in both directios to fill the Viewport.

⇒ What Are Nested SVG Canvases

⇐ Default SVG Viewport in HTML "P" Tag

⇑ SVG Coordinates, Size and Viewport

⇑⇑ SVG (Scalable Vector Graphics)

2023-02-03, 512🔥, 0💬