Group <g /> element

Objective: Learn to use the group <g /> element and to organize drawing components

The <g>...</g> element is a powerful structural element that allows you to group and control groups of drawing shapes and components. It is flexible and powerful and is an essential tool when creating hand-crafted SVG.

14.1 The <g /> element

The <g>...</g>" element is a container for grouping objects together for some design reason.

Other elements in <g />

<g /> can contain any combination of the following elements:

All shape elements  <circle />, <ellipse />, <line />, <path />, <polygon />, <polyline />, <rect />

All text elements  <textPath />, <text />, <tref />, <tspan />

Structural elements <defs />, <g /> <svg />, <symbol />, <use />

Descriptive elements <desc />, <metadata />, <title />

Attributes on a <g />

All elements that are in a group will inherit attributes from the parent <g /> element. Attributes applied to any shapes inside the group will over-ride the parent property.

NOTE: <g /> does not have x,y positioning attributes of its own.

Transforms on a <g />

Shapes in <g /> can be transformed together. That means they can have the transform attribute values applied. IE. translate(x,y) rotate(deg,x,y) scale(s,y) skewX(x) and skewY(y).

Nesting of <g />

<g /> elements can be nested. This is very powerful for organizing drawings with complex shape position relationships.

Now let's look at this in the real world.

14.2 <g /> With presentation attributes

One of the most useful behaviours of the <g /> element is inheritance of presentation attributes. This can result in significant reduction of file size. You can use the class, style or standard SVG attributes. 

SVG Editor for <g /> Presentation Attributes

Four circles have been drawn. One in each corner of the drawing.

<g style="stroke:green; stroke-width:6; fill:blue;">
        <circle cx="50" cy="50" r="40"></circle>
        <circle cx="150" cy="50" r="40"></circle>
        <circle cx="50" cy="150" r="40"></circle>
        <circle cx="150" cy="150" r="40" stroke="red"></circle>
    </g>

 The all have the same presentation properties applied because they inherit them from the <g /> element.

The bottom right circle has a red stroke because it has had the stroke properties applied to it directly. This over-rides the parent <g /> stroke attribute property value.

Exercises

Use the SVG Editor to:

1. Take off the stroke="red" attribute of the bottom right circle.
2. Modify the style attributes of all the circles by adjusting the stroke, stroke-width and fill for all the circles. You can introduce other styles such as stroke-dasharray if you like.
3. Modify some of the styles of the individual circles to over-ride the styles in the <g /> parent element.

14.3 <g /> With the transform attribute

In this next example you will start to see the power of the <g /> element.

<g id="use-g1" style="stroke:green; stroke-width:6; fill:blue;">
        <circle cx="50" cy="50" r="40"></circle>
        <circle cx="150" cy="50" r="40"></circle>
        <circle cx="50" cy="150" r="40"></circle>
        <circle cx="150" cy="150" r="40" stroke="red"></circle>
    </g>
    <g id="use-g2" style="stroke:green; stroke-width:6; fill:blue;" transform="rotate(180,100,100)scale(0.5) translate(-200,0)">
        <circle cx="50" cy="50" r="40"></circle>
        <circle cx="150" cy="50" r="40"></circle>
        <circle cx="50" cy="150" r="40"></circle>
        <circle cx="150" cy="150" r="40" stroke="red"></circle>
    </g>

 Here the same four circles have been drawn in the same positions and the transform applied to the <g /> element. It has been rotated 180 degrees around it's centre and then moved 200 pixels to the left.

because 180deg rotation was done first the image has been inverted both vertically and horizontally. You can see the origin is now upside down in the bottom right corner (Instead of the top left corner). 

We had to use -200px for the translate x move.

If we want to move it up this would require the y translate value to be 200 because the Y origin is at the bottom of the rotated group.

Exercises

1. Some items may disappear while you experiment with the rotate transform. Change the viewBox to viewBox="-200, -200, 800, 400 so you can see "outside the box".
2. Reorder the transform attribute so the translate(x,y) value is before the rotation value. (Hint the transform X value will now have to be positive).
3. Scale the second <g /> to 0.5 and see what happens. Move the scale(0.5) value to different positions in the transform attribute.
4. In the second <g /> change the y translate value to 200 and see what happens.
5. Learn that the sequence of transform attributes components is as important as their values.

Example For Multiple <g />'s and things

We will be using the <g /> element all the time from now on. Here is a slightly more elaborate example of the power of structural elements working with shapes.

</-- Basic group with four circles -->
<g id="use-g3" style="stroke:green; stroke-width:6; fill:blue;">
        <rect x="0" y="0" width="200" height="200" stroke-width="0" fill="yellow"></rect>
        <circle cx="50" cy="50" r="40"></circle>
        <circle cx="150" cy="50" r="40"></circle>
        <circle cx="50" cy="150" r="40"></circle>
        <circle cx="150" cy="150" r="40" stroke="red"></circle>
    </g>
</-- Basic group with transforms for scale and translate  -->
    <g id="use-g4" style="stroke:green; stroke-width:6; fill:blue;" transform="scale(0.5) translate(600,0)">
</-- group inside a group to apply a further transform rotate -->
        <g transform="rotate(180,0,100)">
            <rect x="0" y="0" width="200" height="200" stroke-width="0" fill="orange"></rect>
            <circle cx="50" cy="50" r="40"></circle>
            <circle cx="150" cy="50" r="40"></circle>
            <circle cx="50" cy="150" r="40"></circle>
            <circle cx="150" cy="150" r="40" stroke="red"></circle>
        </g>
    </g>
</-- use to scale and position a copy of the basic group -->
    <use id="use-basic-group1" x="600" y="0" xlink:href="#use-g3" stroke="none" transform="scale(0.5, 1)"></use>
</-- use to re-scale and position the previous use -->
    <use x="-100" y="200" xlink:href="#use-basic-group1" stroke="none" transform="scale(1,0.5)"></use>
</-- g containing a full SVG file -->
<g>
    <svg>
        <g style="fill:none; stroke:white; stroke-width:6">
           <rect x="20" y="20" width="360" height="160" />
        </g>
    </svg>
</g>

This example is a little complicated but illustrates the following:

<g /> can be used to group shapes.

<g /> can be used to transform a group of shapes.

<g /> can be used inside <g /> with tranforms applied at all levels

<use /> can refer to all the content in a <g /> and transform it.

<use /> can refer to another  <use /> that refers to a <g /> and enable additional transforms to be applied.

<g /> can contain a full SVG file. This makes SVG illustrations straight-forward to use in new artwork.

Study the grouping and carry out some experiments of your own.