SVG: Structure Elements

“g” element

The “g” element is used to group several graphics elements together.

<g id=val style=val >elements</g>

group a set of elements.

Grouping is useful because:

• Re-use the set of graphics elsewhere or multiple times without needing to define them each time.
• Use a single style for all graphics in the group,
• Apply a coordinates transform to all graphics in a group. [see SVG: Coordinate Transformation]

<svg width="100" height="100">
<g id="abc46"
 style="fill:yellow; stroke:blue; stroke-width:5" >
 <rect x="9" y="0" width="30" height="80"/>
 <circle cx="50" cy="50" r="20"/>
</g>
</svg>

To use the grouped graphics in other places, use the use element.

“use” Element

The use element lets you re-use graphics elements without needing to define them again.

The basic syntax of “use” is this:

<use xlink:href="#id" x="x" y="y" />

The elements that can be used by use are: { g, symbol, svg, use }

The use element has optional attributes x, y, width and height which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system.

<svg width="100" height="100">
<g id="abc46"
 style="fill:yellow; stroke:blue; stroke-width:5" >
 <rect x="9" y="0" width="30" height="80"/>
 <circle cx="50" cy="50" r="20"/>
</g>

<use xlink:href="#abc46" x="50" y="0" />

</svg>

“defs” Element

The defs element lets you define some graphics element, then re-use the definition elsewhere. (it's like a variable in programing language, where the variable name is the id attribute value.)

The basic syntax for defs element is:

<defs id="id">graphicsElements</def> → define several things, to be referenced by id.

<svg width="100" height="100">
<defs id="c">
 <circle cx="10" cy="10" r="10"/>
</defs>
</svg>

Note: “defs” does not render the graphics. It only defines the graphics.

To use defined elements, use use tag.