Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

SVG Basics – Organizing SVG code

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 Use of Group Elements

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.

Comments