(click anywhere to close)

[SVG] Aspect Ratio & Grouping

category: Website | course: SVG | difficulty:
1. Grouping

Only one question remains now, which is about aspect ratio; the ratio between the width and height of the picture. All this reframing and scaling of vector graphics is great, but what if we (don’t) want to maintain aspect ratio? How do we force an image to fill the entire width and height, even if that means stretching it one way or another?

By default, SVG preserves this aspect ratio, which is often what you want – at any size, the graphic looks good because the proportions are all correct. But we can turn it off, or customize this behaviour, using the preserveAspectRatio attribute. Its (very general) syntax is:

preserveAspectRatio=”align [meetOrSlice]”

I’ll provide the full explanation of the syntax here, but you don’t need to understand or remember it all at the moment – you haven’t even created your first basic shape with SVG yet!

  • none: Do not preserve aspect ratio.
  • x<pos>Y<pos>: There are three values to fill in for <pos>; min, mid and max. The first aligns the smallest value of the viewbox with the smallest value of viewport. The second aligns the midpoint value of the viewbox with the midpoint value of the viewport. The third aligns the maximum value of the viewbox with the maximum value of the viewport.
  • Optional. The possible values are:
  • meet: Default. Scale up the graphic as much as possible, while preserving aspect ratio and making the entire viewbox visible within the viewport.
  • slice: Scale down the graphic as much as possible, while preserving aspect ratio and covering the entire viewport with the viewbox.


If you haven’t been scared off by the previous section, you’re in for a treat – things will all be much simpler from here on. Let’s stop talking about that <svg> element, and introduce the simplest element of them all: the <g> tag.

This tag has no predetermined properties (such as position or size), and groups everything inside it. This way, you can assign multiple objects to the same ID or class, and perform lots of operations on them all at the same time. This is easiest with CSS, but there’s an attribute available to all SVG objects, which is especially useful for groups: transform=”transformOperation.

The transformOperation follows the same syntax as standard CSS transforms, but with values separated by white space. To illustrate this, the next example rotates a group -45 degrees around the z-axis (the imaginary axis coming out of the screen, straight at the reader).

    <g transform="rotate(-45 0 0)">
        <rect x="10" y="10" width="15" height="30" style="fill:blue;"/>
        <rect x="10" y="50" width="15" height="30" />
        <rect x="30" y="10" width="15" height="30" />
        <rect x="30" y="50" width="15" height="30" fill="red" />

It’s not mandatory to group all elements, but I recommend creating some general groups to keep the markup structured, and make it easy to add the same styles to multiple similar objects at the same time.

As the example demonstrated, there’s quite a bit of overlap between CSS properties and SVG attributes. Some CSS properties, such as transform, can be used as attributes on SVG elements. But more importantly, there are lots of special SVG attributes which can all be used as CSS properties as well. For example, lines have the stroke-width attribute to set the line width, but you can also use it as a CSS property. In the previous example we see the same thing happening for the fill attribute/property. Keep in mind, however, that this only has effect on SVG objects.

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk