Theory
Theory
Comments

Alignment in preserveAspectRatio

SVG content may not only be stretched, but also moved left-right or up-down. To do this, you need to specify the position of the content relative to the X and Y axes, such as, 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 position is set using two parameters: the first is always used to specify the X-axis position, and the second is used to specify the Y-axis position. The Y-axis position is always written with a capital letter. Both parameters are required.

The default value is xMidYMid (content is aligned in the middle of the larger side).

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.