Structuring, grouping and binding in SVG - elements , , and

SVG provides the ability to structure a document by means of special elements that allow you to define and group objects, and also to refer to them in the future. They make it easy to reuse the code, keeping it clean and readable. This article will discuss these elements, as well as their differences and advantages.

Grouping using the <g> element

The <g> element is used to logically group a set of related graphic elements. This can be compared with the grouping of objects in graphic editors.

The <g> element groups all its contents into a group. As a rule, he is given an identifier by which he will be addressed in the future. Any styles applied to the <g> element will also be applied to all its descendants. This allows you to set styles and transformations, as well as add interactivity and animation to a whole group of objects at once.
')
As an example, we will use a bird drawn in SVG. It consists of several separate figures, described by circles and paths. [For unexplained reasons, the author describes circles in ways instead of using a circle, although it was promised to use circles. Do not ask why. I fixed it. Do not ask why. - Trans .]

Codepen example

Let's say you draw such a bird in Illustrator. If you need to move it from one place to another, the grouping of objects simplifies this task, since it allows you not to move each element separately. Grouping in SVG does roughly the same thing. In the example above, in addition to the general group for the whole bird (id = "bird"), we also identified subgroups that define the head and body separately (id = "body", id = "head").

If you change the fill color of the #body group, the fill of all elements within the group will change. It can be very convenient. [Speech is about elements whose fill color is not explicitly set. For example, in the same #body element #wing has its own color. - Trans .]

Grouping elements can be very useful not only for organizing and structuring a document. It can be of particular benefit if you want to add interactivity to the SVG-graphics or set up some transformations. By grouping the elements, you can move them, scale them, or rotate them all together, keeping their position relative to each other.

So, in the case of a grouped bird, you can scale it with just one line of CSS:

 #bird {transform: scale(2);} 

Grouping adds convenience when implementing interactivity. You can hang mouse events on the whole bird and make it react as well. This is much more convenient than doing the same for each element separately.

The <g> element has another important and interesting feature: it can contain <title> and <desc> tags, which allow the image to be processed by Screen Readers [Text playback programs for people with disabilities; I did not find a capacious and adequate translation of the term. - Trans .]; they also make the code more readable for humans. Usage example:

 <g id="bird"> <title>Bird</title> <desc>An image of a cute little green bird with an orange beak.</desc> <!-- ... --> </g> 

Reuse items with <use>

When working with graphics, it is often possible to find a situation where duplicate elements are used. Graphic editors in this case usually use the copy-paste method, which is more convenient than creating an element from scratch.

In SVG, a <use> element implements this functionality. It can be used to reuse both individual elements and groups of elements.

The <use> element accepts x and y coordinates, height (height), width (width) and a link to the source element (xlink: href) as attributes. The reference is the object identifier.

For example, if we want to add another birdie, instead of copying its code, you can use the <use> tag:

 <use x="100" y="100" xlink:href="#bird" /> 

Codepen example

Please note that in the xlink: href attribute you can refer to any SVG element, even if it is in an external file. This is very useful for organizing (for example, you can have a file with reusable components) or for caching frequently used files.

Suppose our bird was created in a separate file animals.svg. In this case, you can refer to it as follows:

 <use x="100" y="100" xlink:href="path/to/animals.svg#bird" /> 

Please note that links to external SVGs in <use> do not work in most versions of IE (up to IE 11). I recommend to read the article from Chris Coyier , which describes the circumvention of this restriction.

The most attentive readers probably noticed that the coordinates specified by the <use> element are not counted from the origin of the entire SVG image. This is actually an abbreviated form of the transform attribute entry. The following two lines are equivalent:

 <use x="100" y="100" xlink:href="#bird" /> <use xlink:href="#bird" transform="translate(100, 100)" /> 

Simply put, the coordinates of the <use> element are relative to the source element. This behavior is not always optimal and may be a disadvantage.

Another disadvantage of <use> is that the copies will use the same styles as the original element. When applying styles or transformations to the #bird group, these styles and transformations will apply to all its copies.

However, you can still apply an independent transformation to the <use> element. For example, the following line of code allows you to reuse a bird, whose dimensions will be only half the size of the original:

 <use x="100" y="100" xlink:href="#bird" transform="scale(0.5)" /> 

[At the same time, the principle of operation of the coordinate system may seem somewhat unexpected. It also scales. If the source element was positioned 100 pixels from the edge of the image, such a copy would be located 50 pixels from the edge. Asked for x and y, this also applies. Thus, the words about the location of the copy relative to the source element are not entirely correct. - Trans .]

Unlike transformations, copy styles cannot be redefined. Thus, if you want to create an army of birds of different colors, you will not be able to use <use> for this (unless the source element is defined inside <defs> without its styles, but this is in the next section).

The <use> element allows you to reuse an element that is already displayed on the SVG image. If you just want to define an element without displaying it, and then draw it in the right place when it is needed, the <defs> element comes to the rescue.

Reusing stored items with <defs>

The <defs> element can be used to store content that will not be displayed during the definition. The content in it is stored in a hidden form and is waiting in the wings when it will be used and displayed by other SVG elements, which makes it ideal, for example, for use in patterns.

Anything can be stored in <defs>, starting with a group of elements, like our bird, and ending with a mask or gradient. This is a template for future use. By itself, it is never displayed, only using its essence.

Below is an example in which the gradient is first defined and then used to fill the rectangle:
Codepen example

[The author made an annoying mistake: the height and width of the rectangle were not indicated. - Trans .]

Defining a linear gradient inside <defs> ensures that it will not suddenly be displayed on its own, only when used anywhere.

In the previous section, two drawbacks of the <use> element were mentioned:

1. The position of the new element is set relative to the original.
2. Source element styles cannot be overridden in copies.

And besides, the original element is displayed by itself.

All of these flaws can be avoided by using <defs>. Not only is the original element not displayed, but also when using an element defined inside <defs>, the position of each instance is set relative to the origin of the coordinate system.

In the following example, we will draw a tree [And forget to think about the binary! - Trans .]. It consists of a trunk and leaves. The leaves are grouped with id = "leaves", and together with the trunk, they belong to a more general group with id = "tree".

At the output, our tree will look something like this:

[Unfortunately, the code was shortened by the author, losing most of the leaves. What is left reminds me of a part of some alien industrial landscape. - Trans .]

If you wrap the #tree group in a <defs> element, the tree will no longer be displayed.

Now the tree serves as a template. We can use it with the <use> element just like any other element. The only difference is that the x and y coordinates are relative to the origin.

As an example, draw a mini-forest.

 <use xlink:href="#tree" x="50" y="100" /> <use xlink:href="#tree" x="200" y="100" /> <use xlink:href="#tree" x="350" y="100" /> 

As you can see, each tree is located relative to the origin, for which in this case the upper left corner of the image is taken. Trees are located independently of each other and the location in the template.

When you reuse elements defined in <defs>, you can apply separate styles for each tree until these styles are defined for the original template. If the tree inside <defs> has its own styles, it will not be possible to override them. Thus, <defs> is perfect for defining the very foundation that will be used and colored when necessary. Using only <use> without <defs>, it would be impossible to achieve such flexibility.

Note that the elements inside <defs> are not displayed, that is, they behave in the same way as the <g> element with the display = "none" property set. However, the descendants of <defs> are always represented in the source tree [Speech on the tree of SVG objects, I suppose. - Trans .], And they can always be referenced by other elements. Thus, the value of the display property of the <defs> element (or its descendants) does not prevent other elements from referring to it, even if this property is set to none.

[Not sure about the understanding of what the author wanted to say in this paragraph. I tried to set display = "none" for the element inside <defs>, and this element was no longer displayed, which seems to be logical. Apparently, talking about the fact that <defs> you can put display = "none", and nothing will change. The following section describes this more clearly. Just in case, add a paragraph in the original. - Trans .]

Grouping elements using <symbol>

The <symbol> element is similar to <g>: it also provides the ability to group elements. There are two main differences:

1. The <symbol> element is not displayed by itself. This is how it looks like <defs>.
2. The <symbol> element can have its own viewBox and preserveAspectRatio attributes. This allows it to fit in the viewport the way you want it, and not as defined by default.

In most cases, <symbol> is appropriate for defining reusable elements (symbols). It still serves as a template for <use>. And with its own viewBox and preserveAspectRatio attributes, it can stretch to the rectangular viewport specified in the <use> element that references it. Note that the <symbol> elements define a new viewport each time it is called by a <use> element.

This is a great feature of the <symbol> element. It allows you to define elements that do not depend on the viewing area in which they fall. They will always be displayed as specified.

But to understand all this magic, you need to know how the viewBox and preserveAspectRatio attributes work. On this topic , Chris Coyier has an article explaining why the <symbol> element is so good, why it is a good choice for implementing icons, and how to use it in general.

I have already written an extensive article about viewport, viewBox and preserveAspectRatio. You can read it: Understanding SVG Coordinate Systems and Transformations (Part 1) - The viewport, viewBox, and preserveAspectRatio .

It should be noted that the display property does not apply to the <symbol> element. Even if you set it different from display = "none", the element will still not be displayed. And at the same time, the <symbol> element can be referenced, even if the display = "none" property is set for it or its descendants.

Conclusion

All of these elements are structural SVG containers that make it easy to reuse elements, while making the code cleaner and clearer. Each of these elements has its own scope of application. Now that you know what each one does and how they differ from each other, you can decide which one to use depending on the situation.

I hope you enjoyed the article and found it useful. Thank you for reading!

From translator

Translation in places is quite free, but not to the detriment of the meaning or content. Everything that does not relate directly to the original, made in the notes. I made small changes to the code in places, but this is either completely uncritical or noted in the notes.

With suggestions, suggestions and comments, as usual, in drugs.