|
SVG Basics - Organizing SVG code
|
|
Published
07/17/2006
|
SVG Viewer
|
|
|
|
|
|
Organizing SVG code
This page will examine the different ways SVG allows you to organize a single SVG file.
The 'g' Element - Grouping <g id="group1" fill="green" opacity="0.9" >
<rect x="20" y="20" width="100" height="100" opacity="0.5" />
<rect x="80" y="80" width="100" height="100" fill="gray" />
</g>
Code 1. The g tag | Attribute | Explanation |
| id | The name of the group. This is used to reference the group. |
| fill | The default fill color for the group |
| opacity | The default opacity for the group. |
| etc. | See below |
| Presentation Attributes | All |
The grouping of tags is the primary way SVG documents are structured. This is true even if elements inside the group do not have those attributes. Elements outside and inside of a group are treated identically and there is no limit to the depth of grouping.
The attributes of the group do not override the attributes of the individual members. This is sometimes hard to see as there is an inconsistency in how some attributes of 'g' are used. Most like 'fill' are used as inherited defaults. Opacity and other composition attributes (like masks, clipping planes and transformations) are applied to the group as a whole after the individual elements have been rendered. An opacity of 0.9 makes the entire group 0.1 more transparent when it is drawn. It does not change the opacity of elements of the group.
The following example shows how grouping fits into the other two organization tools in SVG the 'defs' element and the 'use' element. Note: All SVG elements have an 'id' attribute so you can reference them.
<defs>
<g id="group1" fill="green" opacity="0.9" >
<rect x="20" y="20" width="100" height="100" opacity="0.5" />
<rect x="80" y="80" width="100" height="100" fill="gray" />
</g>
</defs>
<use x="0" y="0" width="200" height="200" xlink:href="#group1" />
<use x="0" y="0" width="200" height="200" xlink:href="#group1"
transform="rotate(70, 100, 100)" />
Code 2. The defs and use tag
The 'defs' Element - Defining
The defs element is used to define SVG elements without rendering it to the screen. Things like gradients and patterns in SVG must be predeclared and referenced in order to use. Thus, the defs tag is used to contain elements referenced in other parts of the SVG document via URIs.
Where a 'g' element can be used, a 'defs' element can also be used and vis versa. The results and uses of each tag are quite different. Nesting 'defs' in particular is valid but makes no sense and has no effect. It's still not going to be rendered!
The 'defs' element has no (interesting) attributes in case you're wondering. I highly recommend keeping all definitions in a single defs tag at the top of each SVG document fragment and only referencing elements inside of a 'defs' tag.
The 'use' Element - Using
| Attribute | Explanation |
| x | X-axis. (x,y) is the top-left corner of the cloned element. |
| y | Y-axis. (x,y) is the top-left corner of the cloned element. |
| width | The width of the cloned element |
| height | The height of the cloned element |
| xlink:href | A URI reference to the cloned element/fragment. Must be in the same document |
| Presentation Attributes | All |
The 'use' element uses a URI to reference a 'g', 'svg' or other graphical element (rectangle, circle, text, etc) with a unique id attribute and replicate it. This replicated object, like the 'g' element, uses any presentation attributes applied to the 'use' tag as defaults.
The copy is only a reference to the original so only the original exists in the document. Any change to the original effects all copies. The copy is not part of the document.
Advance note: The SVG viewer creates a DOM or Document Object Model when it parses the SVG file. It represents the structure of the document. Only the 'use' tag is added to the tree and SVG viewer searches for the original when it finds a 'use' tag.
The point (x,y) and the width and height are used to define a rectangle the referenced object is drawn into.
