Theory
Theory
Comments

The preserveAspectRatio Attribute

By default, SVG content with a viewBox is scaled to maintain the aspect ratio, and if the aspect ratios of the sides of the viewport and viewbox do not match, margins will appear around the content:

The preserveAspectRatio property can be used to change this behavior: for example, the value none indicates that the aspect ratio should not be preserved:

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

In this case, the area whose dimensions are set by the viewbox is stretched to fit the entire available viewport space:

preserveAspectRatio is set only using an attribute.

object.svg
style.css

SVG

<svg viewBox="0 0 200 150" 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

Set the SVG element preserveAspectRatio to a value of none.