Aspect a surprise

When you size an <svg> element with an existing viewBox you must be wary of aspect ratio. The issue is more intuitive than a certain article would have you believe, but there are indeed a few hiccups.

And starting with the default behavior, you will soon discover you often get more than you expect.

Consider an unassuming, 1 by 1 canvas with a rough sketch.

<svg viewBox="0 0 1 1">
	<!-- ... -->
</svg>

Left to its own devices, or again sized with the same width and height, the element and the canvas share the same aspect ratio. The element and the canvas remain a square, and you get to appreciate whatever you drew in the viewBox constraints.

Set the width and height in a 3 to 1 ratio, however, and something close to peculiar happens. The element grows to the fixed measures and the canvas adapts to preserve the original proportions. The artwork? The piece is left untouched and moves in the very center.

This is the default behavior of preserveAspectRatio. The article tries to examine the attribute in details, but already, it’s important to stress an important trait: the element grows into a rectangle, and the canvas follows. The field-of-view set with the viewBox effectively changes.

In SVG, viewBox describes the visible area. Everything you draw within the area is visible. Everything you draw outside of its boundaries is not. <path>, <rect> elements still exist, but you just don’t see them. To see them you need to update the viewBox. You may do so explicitly, changing the origin or again the dimensions. Or, by happenstance, as you mess up with the width and height.

Had there been a <circle> positioned to the right of the sinuous <path>.

<svg viewBox="0 0 1 1">
	<!-- ... -->
	<circle cx="1.5" cy="0.5" r="0.1" />
</svg>

Had there been an <ellipse> on the opposite end.

<svg viewBox="0 0 1 1">
	<!-- ... -->
	<ellipse cx="-0.5" cy="0.5" rx="0.1" ry="0.08" />
</svg>

The moment you morphed the <svg> into a rectangle, these shapes would have suddenly appeared.

You may tweak preserveAspectRatio to show different portions, but you need to consider that width and height do modify the SVG, in more than one way.

You can look for a <clipPath> element to decide what to show once and for all, but while you are at it, you can lean in the feature and show a few more colors.