SVG: Structure Elements
The “g” element is used to group several graphics elements together.
<g id="…" style="…" >…</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]
To use the grouped graphics in other places, use the
Document Structure – SVG 1.1 (Second Edition)#Groups
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-coord" y="x-coord" />
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.
Document Structure – SVG 1.1 (Second Edition)#UseElement
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
Document Structure – SVG 1.1 (Second Edition)#Head
Document Structure – SVG 1.1 (Second Edition)#SymbolElement
Document Structure – SVG 1.1 (Second Edition)#ImageElement
- SVG Basics
- Path Elliptical Arc
- Circle Arc
- Specifying Styles
- Shape Styles
- ViewBox Unit Size
- Coordinate Transformation
- Text Element
- Font Size
- Structure Elements
- Scripting SVG
- SVG Clock
If you have a question, put $5 at patreon and message me.