In the previous example, the aspect ratio, or ratio of
width to height, of the viewport and the
viewBox were identical (4/5 = 64/80). What
happens, though, if the aspect ratio of the viewport and the viewBox are
not the same, as in this example, where
viewBox has an aspect ratio of one to one, but
the viewport has an aspect ratio of one to three?
<svg width="45px" height="135px" viewBox="0 0 90 90">
There are three things that SVG can do in this situation:
Scale the graphic uniformly according to the smaller dimension so the graphic will fit entirely into the viewport. In the example, the picture would become half its original width and height. We’ll show you examples of this in Section 2.4.2.
Scale the graphic uniformly according to the larger dimension and cut off the parts that lie outside the viewport. In the example, the picture would become one and a half times its original width and height. We’ll show you examples in Section 2.4.3.
Stretch and squash the drawing so that it fits precisely into the new viewport. (That is, don’t preserve the aspect ratio at all.) We will cover this in Section 2.4.4.
In the first case, since the image will be smaller than the viewport in one dimension, you must specify where to position it. In the example, the picture will be scaled uniformly to a width and height of 45 pixels. The width of the reduced graphic fits the width of the viewport perfectly, but you must now decide whether the image meets (is aligned with) the top, ...