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>
g
to group.
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>
use
“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>
defs
Note: “defs” does not render the graphics. It only defines the graphics.
To use defined elements, use use
tag.