An Introduction to SVG – Part 3

Hey guys, welcome to another post about SVG. So far we’ve seen how to create, stylize, and load SVG shapes and we took a look at the SVG coordinate systems, the viewport and the viewbox. By now, you have acquired some basic knowledge on SVG and you might have ideas or little tricks of your own.

Speaking of tricks… have you ever seen magic tricks with little red foam balls? The magician would show one ball in his left hand, show his empty right hand, close both of them, and when he reopen them, there would be two balls in his right hand as if the main ball in his left hand had been cloned in his right hand twice. Or, he would do the same trick but the ball in his left hand would vanish just before he reopens it.

What we’ll see today is pretty much like the magician’s tricks but with SVG elements.

In this post, my goal is to provide you with thoughtful information on container elements and how to define elements that can be reused in your SVG. But before I walk you through, you’ll need some knowledge about the viewbox and the PreserveAspectRatio attribute we saw in my last article. You might want to look at it before moving forward.

Alright, let’s start with our first container element, the tag.

The <g> tag

The <g> tag stands for “group” and it’s a container element. Its main purpose of is to… *drum roll*… group related elements together. Grouping elements, in and of itself, does not provide much advantage other than categorizing elements that are related, which structure-wise and semantically is more interesting than a bunch of disorganized SVG elements. You can also add a <title> and a <desc> attribute to it if you want to describe your group, which I highly recommend.

What makes the <g> element undoubtedly useful, is the effect it has on its children. All elements within the <g> will inherit the presentation attributes of their parent. For instance, if the <g> element has a presentation attribute fill set to red, all of its children will be red. But it will not overwrite the presentation attribute of the child if it already has one. So, if one of the children has the presentation attribute fill set to blue, that element will still be blue.

Along with presentation attributes, the children of the <g> container will also be assigned the modifications, transformations, and animations of the group.
This is way more useful than applying them to all the children individually.

Think of your dishwasher. Would you prefer to clean your spoons, forks, glasses and plates one at a time or put them all in the dishwasher and clean them all at the same time? (you can probably guess what was standing right in front of me at the time of writing the last sentence.) Let’s move on.

The <use> tag

The <use> tag lets us “use” an SVG element and duplicate it elsewhere in our SVG without having to recreate it. It’s pretty much like a “copy/paste” you would do with any drawing tool.
You can reference elements, groups, and symbols, which we’ll see later on.

To identify an element as the “referenced element”, all we have to do is add an id attribute. Then, we can add the <use> tag to link our “referenced element” using the xlink:href=”...” attribute. Since we probably don’t want our elements to overlap each other, we also need to change the coordinate using the X and the Y attributes.

Note that the X and Y of the <use> element are relative to the X and Y of the referenced element. Since it is not based on the (0,0) coordinates, it acts pretty much as a translation. For example, if our reference element coordinate is at (100,20) and our <use> element has an X=”50” Y=”20” the coordinates of the <use> element will be (150, 40).

On a side note, the presentation attribute of the “pasted” element will not overwrite the ones of the referenced element. So if you have a fill=”red” attached to the referenced element you won’t be able to set the presentation attribute fill to the <use> element.

Pretty cool, right? This tag allows you to create only one element and duplicate it as much as you like. But what if you want to use the reference element without seeing it? To do so, simply place it inside a <defs> tag.

The <defs> tag

The <defs> tag contains elements that will be referenced later in our document. As seen in in the previous section, each one of these elements needs an id attribute to be able to reference it later. What makes the <defs> useful is the fact that it will not be rendered where it is declared. This means you can have as many elements inside the <defs> tag and it will never be visible in your SVG. It’s pretty much as if you added a CSS display:none attribute to it.

To use elements defined in the <defs> container element, simply use the <use> tag like as mentioned in the previous section. Since the referenced elements are not displayed, I recommend not to set any position attributes (X,Y) on them. By doing so, when you’ll add them to the <use> element, the coordinate will be relative to the top left corner of the SVG, which is the (0,0) coordinates. You can also add a <title> and a <desc> attribute if you want to better describe your code.

So for our example, if we put our #myCircle inside a <defs> only the <use> element will be rendered.

We can also add presentation attributes to each one of the <use> element independently to the referenced element but only if they were not specified in the referenced element.

See the <defs> tag as an invisible box with a bunch of element you can pick from whenever you need them.

The <symbol> tag

Symbol is pretty much a mix of the <g> and the <defs> container elements but with a little extra. It is used to group elements which give us better structure and semantic to our SVG.
You can add a <title> and a <desc> elements and only its instances using the <use> tag will be rendered.

What makes the <symbol> stand out from the other container elements, is the fact that it can have it’s own preserveAspectRatio and viewBox attributes. This is useful because it makes it independent from the viewport of the main SVG.

To learn more about the viewbox and the preserveAspectRatio, check out my previous article.

Conclusion

Grouping and referencing elements can be quite useful as it lets you organize your SVG file, define elements and “attributes” that can be reused with or without displaying them during their declaration.

See you next time and, until then, take care of yourself.