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: