Theory
Theory
Comments

Alignment in preserveAspectRatio

SVG content may not only be stretched, but also aligned horizontally or vertically. To do this, you need to specify the position of the content relative to the X and Y axes, for example, using xMinYMid:

<svg viewBox="0 0 237 300" preserveAspectRatio="xMinYMid">
  …
</svg>

Possible values for each axis:

xMin

xMid

xMax

YMin

YMid

YMax

The alignment value combines two parts with no space: the first specifies the X-axis position, and the second specifies the Y-axis position. The first part starts with a lowercase x, and the second starts with an uppercase Y. Both parts are required.

The default alignment is xMidYMid (the scaled area is centered in the viewport).

object.svg
style.css

SVG

<svg viewBox="0 0 200 150" preserveAspectRatio="none" width="400" height="200"> <rect width="100%" height="100%" fill="none" stroke="yellowgreen" /> <g fill="orange" stroke="saddlebrown" stroke-width="15"> <circle r="23" cx="32" cy="31" /> <circle r="23" cx="168" cy="31" /> </g> <ellipse fill="saddlebrown" rx="84" ry="70" cx="100" cy="80" /> <circle fill="none" stroke="#000000" stroke-opacity="0.5" stroke-width="3" r="4" cx="100" cy="135" /> <g> <ellipse fill="orange" rx="24" ry="28" cx="77" cy="78" transform="rotate(-30,77,78)" /> <ellipse fill="white" rx="14" ry="16" cx="79" cy="83" transform="rotate(-30,79,83)" /> <circle fill="black" r="9" cx="82" cy="87" /> <circle fill="white" r="3" cx="84" cy="83" /> </g> <g> <ellipse fill="orange" rx="24" ry="28" cx="123" cy="78" transform="rotate(30,123,78)" /> <ellipse fill="white" rx="14" ry="16" cx="120" cy="83" transform="rotate(30,120,83)" /> <circle fill="black" r="9" cx="118" cy="87" /> <circle fill="white" r="3" cx="121" cy="83" /> </g> <g stroke="#000000" stroke-opacity="0.5" stroke-width="5" stroke-linecap="round"> <path d="M55,45 68,42" /> <path d="M145,45 135,42" /> </g> <g> <ellipse fill="black" rx="25" ry="15" cx="100" cy="107" /> <ellipse fill="white" fill-opacity="0.1" rx="17" ry="9" cx="102" cy="103" /> <ellipse fill="white" fill-opacity="0.1" rx="8" ry="4" cx="104" cy="100" /> </g> </svg>

CSS

svg { border: 2px solid teal; }

Goalscompleted

0

Use preserveAspectRatio to move the content towards the middle of the right edge.
Change the dimensions: set the width to 250 and the height to 400, then move the content to the middle of the bottom edge.