A set of drawing elements can be grouped together by placing them inside a g element:

<g>
<rect  class="traffic" width="100" height="300"   rx="10" ry="10"  /> 
<circle r="40" class="dullred" cx="50" cy="50" />
<circle r="40" class="dullamber" cx="50" cy="150" />
<circle r="40" class="green" cx="50" cy="250" />
</g>

The reason for grouping elements are many and varied:

  • A group can set transformations and attributes, which are inherited by the elements inside the group
  • groups can be nested so complex structures can be built out of simpler structures and so on
  • groups can be named and referenced via ids
  • groups can be reused and act as a symbol library
  • groups make SVG more readable

When SVG elements like the g element are used to define something not to render it, it is placed inside a defs element.

<defs>
<g id="myobject">
<rect  class="traffic" width="100" height="300"   rx="10" ry="10"  /> 
<circle ... 
</g>
</defs>

This object can then be used later by:

<use xlink:href="#myobject">

So if we want multiple traffic lights we could generate: