SVG: Structure Elements
the “g” element is used to group several graphics elements together.
<g id="…" style="…" >…</g> → group a set of elements.
group 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〕
To use the grouped graphics in other places, use the
use element lets you re-use graphics elements without needing to define them again.
The elements that can be used by
use element has optional attributes
height which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system.
The basic syntax of “use” is this:
<use xlink:href="#id" x="x-coord" y="x-coord" />
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">graphics_elements</def> → define several things, to be referenced by id.
Note: “defs” does not render the graphics. It only defines the graphics.
To use defined elements, use