viewBox

viewBox="minX minY width height" names the rectangle of user space the viewport shows, scaled to its width and height: one icon drawn in a 0-100 box serves at 16 pixels and at 512. When the aspect ratios differ, preserveAspectRatio aligns the viewBox (xMinYMin to xMaxYMax, default xMidYMid) and either meets (default: scale by the smaller ratio) or slices (scale by the larger, crop the rest); none stretches each axis.

One 100 x 100 drawing in four 160 x 80 viewportsHTMLLive

<style>svg { width:160px; height:80px; background:#eceff1 }
  p { display:inline-block; margin:0 4px 0 0; font:13px Arial; text-align:center }</style>
<script>
  const art = `<rect width="100" height="100" fill="#fff3e0"/>
    <circle cx="50" cy="50" r="40" fill="#e09a10"/>
    <rect x="30" y="30" width="40" height="40" fill="#1f5f8b"/>`;
  for (const par of ['xMidYMid meet', 'xMinYMid meet', 'xMidYMid slice', 'none'])
    document.body.insertAdjacentHTML('beforeend', `<p><svg viewBox="0 0 100 100"
      preserveAspectRatio="${par}">${art}</svg><br>${par}</p>`);
</script>

Browser output of 2

The script stamps one drawing into four viewports. meet scales by min(160/100, 80/100) = 0.8; slice scales by 1.6 and crops; none scales x by 1.6 and y by 0.8, turning the circle into an ellipse.

MENU