SVG document structure : Elements grouping

The <g> tag is grouping and identifying elements with same attributes like color or style
• Example :
• <g style="fill:red" id="Great red rectangles">

<rect x="100" y="100" width="200" height="200 />
<rect x="300" y="400" width="100" height="100 />
</g>
<g style="fill:blue" id="Small blue rectangles">
<rect x="10" y="10" width="20" height="20 />
<rect x="30" y="40" width="10" height="10 />
</g>
• Any number of <g> structures can be overlapped
• Isolated objects ( outside any structure ) are assumed to be inside their own group ( their attributes are not propagated )

Didier Courtaud The SVG language Novembre 2001

10 / 74