serenity/Base/res/html/misc/svg-preserve-aspect-ratio.html

<!-- Based on the hit MDN example! -->
<style>
  svg {
    border: 1px solid black;
  }
  div {
    display: inline-block;
    margin: 20px;
  }
</style>

<!-- (width>height) meet -->
<div>
<b>xMidYMid meet</b><br>
<svg
  viewBox="0 0 100 100"
  width="100"
  height="50"
  preserveAspectRatio="xMidYMid meet"
  x="0"
  y="0">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<div>
<b>xMinYMid meet</b><br>
<svg
  viewBox="0 0 100 100"
  width="100"
  height="50"
  preserveAspectRatio="xMinYMid meet"
  x="25"
  y="0">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<div>
<b>xMaxYMid meet</b><br>
<svg
  viewBox="0 0 100 100"
  width="100"
  height="50"
  preserveAspectRatio="xMaxYMid meet"
  x="50"
  y="0">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<!-- (width>height) slice -->
<div>
<b>xMidYMin slice</b><br>
<svg
  viewBox="0 0 100 100"
  width="100"
  height="50"
  preserveAspectRatio="xMidYMin slice"
  x="0"
  y="15">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<div>
<b>xMidYMid slice</b><br>
<svg
  viewBox="0 0 100 100"
  width="100"
  height="50"
  preserveAspectRatio="xMidYMid slice"
  x="25"
  y="15">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<div>
<b>xMidYMax slice</b><br>
<svg
  viewBox="0 0 100 100"
  width="100"
  height="50"
  preserveAspectRatio="xMidYMax slice"
  x="50"
  y="15">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<!-- (width<height) meet -->
<div>
  <b>xMidYMin meet</b><br>
<svg
  viewBox="0 0 100 100"
  width="50"
  height="125"
  preserveAspectRatio="xMidYMin meet"
  x="75"
  y="0">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<div>
  <b>xMidYMid meet</b><br>
</rect>
<svg
  viewBox="0 0 100 100"
  width="50"
  height="125"
  preserveAspectRatio="xMidYMid meet"
  x="90"
  y="0">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<div>
  <b>xMidYMax meet</b><br>
<svg
  viewBox="0 0 100 100"
  width="50"
  height="125"
  preserveAspectRatio="xMidYMax meet"
  x="105"
  y="0">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<!-- (width<height) slice -->
<div>
  <b>xMinYMid slice</b><br>
<svg
  viewBox="0 0 100 100"
  width="50"
  height="125"
  preserveAspectRatio="xMinYMid slice"
  x="120"
  y="0">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<div>
  <b>xMidYMid slice</b><br>
<svg
  viewBox="0 0 100 100"
  width="50"
  height="125"
  preserveAspectRatio="xMidYMid slice"
  x="135"
  y="0">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<div>
  <b>xMaxYMid slice</b><br>
<svg
  viewBox="0 0 100 100"
  width="50"
  height="125"
  preserveAspectRatio="xMaxYMid slice"
  x="150"
  y="0">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>

<!-- none -->
<div>
  <b>none</b><br>
<svg
  viewBox="0 0 100 100"
  width="160"
  height="60"
  preserveAspectRatio="none"
  x="0"
  y="30">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>
</div>