The <g> or group element is one of the most commonly used elements in SVG. A group provides a logical structure to the shapes in your graphic, but it has the additional advantage that styles applied to a group will be inherited by the shapes within it.

<svg xmlns="http://www.w3.org/2000/svg"
height="320px" width="140px">
    <title xml:lang="en">Primary Color Spotlight</title>
    <rect x="20" y="20" width="100" height="280" fill="blue" stroke="black" stroke-width="3" />
    <g stroke="black" stroke-width="2">
        <circle r="30" cx="70" cy="80" fill="red" />
        <circle r="30" cx="70" cy="160" fill="yellow" />
        <circle r="30" cx="70" cy="240" fill="#40cc40" />
    </g>
</svg>

Groups can associate a single <title> element with a set of shapes that together make up a meaningful part of the graphic. They can be used to apply certain stylistic effects, such as masks or filters on the combined graphic, instead of the individual shapes.

Grouping can also be used to move or even hide a collection of elements as a unit.

Inheriting attributes

Geometric attributes (cx, r, etc) are not inherited. If they aren’t specified, they default to zero.

Presentation attributes

Presentation attributes can be also set using the standard CSS approach (CSS styles and CSS classes).

rect {
    fill: #0a58ca;
    stroke-width: 3;
}
.light {
    stroke-width: 2;
}

<circle class="light" style="fill: red" cx="70" cy="80" r="30" />