HTML5 SVG 2D Introduction 7 - Reuse and Reference of SVG Elements

I have introduced a lot of graphic elements before. If many graphic elements are the same, do I need to define a new one every time? Can we share some graphics? This is the focus of this section - the reuse of SVG elements.

The g element is a container that combines a group of related graphic elements into a whole; this way, we can operate on this whole. This element can usually be used in conjunction with the desc and title elements to provide the structure information of the document. Well-structured documents are usually well readable and rendered. See a small example:

<svgxmlns="http://www.w3.org/2000/svg"

version="1.1"width="5cm"height="5cm">

<desc>Twogroups,eachoftworectangles</desc>

<gid="group1"fill="red">

<rectx="1cm"y="1cm"width="1cm"height="1cm"/>

<rectx="3cm"y="1cm"width="1cm"height="1cm"/>

</g>

<gid="group2"fill="blue">

<rectx="1cm"y="3cm"width="1cm"height="1cm"/>

<rectx="3cm"y="3cm"width="1cm"height="1cm"/>

</g>

<!--Showoutline of canvasing'rect'element-->

<rectx=".01cm"y=".01cm"width="4.98cm"height="4.98cm"

fill="none"stroke="blue"stroke-width=".02cm"/>

</svg>

1.xmlns=http://www.w3.org/2000/svg indicates that the default namespace of the entire svg element is svg. This can be omitted when there is no ambiguity. Since the svg document is an XML document, the relevant rules for the XML namespace are applicable here. For example, you can give the specified namespace displayed in svg, provide alias to the namespace, etc.

2.g elements can be nested.

3. The combined graphic elements are the same as individual elements, and the id value can be given. In this way, when needed (such as animation and reuse of a group of elements), you can just refer to this id value.

4. Combining a set of graphic elements can set the relevant attributes of this set of elements (fill, stroke, transform, etc.), which is also a scenario where combinations are used.

The symbol element is used to define a graphic template (the template can contain many graphics), which can be instantiated by the use element. The functions of the template are very similar to the g element, both providing a set of graphic objects, but there are some differences. The difference from the g element is:

1. The symbol element itself will not be rendered, only instances of the symbol template will be rendered.

2. The symbol element can have attributes viewBox and preserveAspectRatio, which allow symbol to scale graphic elements.

From a rendering point of view, elements similar to symbol elements are marker (defining arrows and markers) and pattern (defining color) elements; these elements will not be rendered directly; their usage is basically instantiated by the use element. It is precisely for this reason that the 'display' attribute is meaningless for symbol.

The following modified code shows how symbol is used:

<svgxmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

version="1.1"width="5cm"height="5cm">

<desc>Twogroups,eachoftworectangles</desc>

<symbolid="group1"fill="red">

<rectx="1cm"y="1cm"width="1cm"height="1cm"/>

<rectx="3cm"y="1cm"width="1cm"height="1cm"/>

</symbol>

<gid="group2"fill="blue">

<rectx="1cm"y="3cm"width="1cm"height="1cm"/>

<rectx="3cm"y="3cm"width="1cm"height="1cm"/>

</g>

<usexlink:href="#group1"target="_blank"rel="nofollow">

<!--Showoutline of canvasing'rect'element-->

<rectx=".02cm"y=".02cm"width="4.96cm"height="4.96cm"

fill="none"stroke="blue"stroke-width=".02cm"/>

</svg>

SVG allows you to define a set of objects and then reuse it (note that it is not just a graphic object). The most common example is to define a gradient color and then assign fill attributes to other graphic objects. Gradient color definition will not be rendered, so objects of this type can be placed anywhere. Reuse is often found in graphical objects, and we do not want to render directly when defining, but instead want to render in references. This can be implemented using the defs element.

Generally speaking, the recommended approach is to place the referenced object into the defs element whenever possible. These objects are usually: altGlyphDef, clipPath, cursor, filter, marker, mask, pattern, linearGradient, radialGradient, symbol and graphical objects. Defining these objects in the defs element is easy to understand, so it improves accessibility.

In fact, the g elements, symbol elements, and defs elements as container objects all provide reuse to varying degrees, but the characteristics of each element may be slightly different: for example, the g elements are rendered directly, symbol and defs will not be rendered directly, symbol contains the viewBox attribute, which will create a new window.

Usually, elements defined in defs are assigned an id attribute and used directly wherever they are used. Depending on the elements, these definitions can be used in different places, such as the following progressive colors as attributes:

<svgwidth="8cm"height="3cm"

xmlns="http://www.w3.org/2000/svg"version="1.1">

<desc>LocalURIreferenceswithinancestor's'defs' element.</desc>

<defs>

<linearGradientid="Gradient01">

<stopoffset="20%"stop-color="#39F"/>

<stopoffset="90%"stop-color="#F3F"/>

</linearGradient>

</defs>

<rectx="1cm"y="1cm"width="6cm"height="1cm"

fill="url(#Gradient01)"/>

</svg>

The definition of the graphic related elements can be linked to the document using the use element. For example:

<svgwidth="10cm"height="3cm"viewBox="0010030"version="1.1"

xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">

<desc>ExampleUse01-Simplecaseof'use'ona'rect'</desc>

<defs>

<rectid="MyRect"width="60"height="10"/>

</defs>

<rectx=".1"y=".1"width="99.8"height="29.8"

fill="none"stroke="blue"stroke-width=".2"/>

<usex="20"y="10"xlink:href="#MyRect"/>

</svg>

Please note the use of xlink namespace here. Although most viewers will also display this item correctly without it, for consistency, the xlink namespace should be defined on the <svg></svg> element.

Any svg, symbol, g, single graphic element and use element can essentially be referenced (for example initialized) as template objects by the use element. The graphics content referenced by use will be rendered at the specified location. Unlike the image element, the use element cannot reference the entire document.

The use element also has x, y, width and height attributes. These attributes can be omitted. If not omitted, the referenced graphics content coordinates or length will be mapped to the current user coordinate space.

The action process of the use element is equivalent to deeply copying the referenced object into an independent non-public DOM tree; the parent node of this tree is the use element. Although it is a non-public DOM node, it is essentially a DOM node. Therefore, all attribute values, animations, events, and CSS related settings of the referenced object will be copied and will still work. Moreover, these nodes will also inherit the relevant attributes of the use element and the use ancestor (note that the referenced elements are deep copies, and these copied elements have nothing to do with the original element, so the attributes of the referenced element ancestor node will not be inherited here). If these nodes themselves have related (CSS) attributes, they will also overwrite the inherited attributes, which are consistent with ordinary DOM nodes, so be careful when using visibility:hidden for use elements, and it will not necessarily work. However, since these nodes are non-public, in DOM operations, you can only see the use element, so you can only operate the use element.

From the perspective of visual effects, the use element is more like a placeholder, and the visual effect after rendering is the same as directly rendering with the referenced object:

In this case, the visual effect is equivalent to:

(1) Change the use element to the g element;

(2) Move all the properties of use except x, y, width, height, xlink:href to the g element;

(3) Turn the x and y attributes of use into translate(x,y), and append to the last transform attribute of the g element;

(4) Replace the referenced symbol element with the svg element. This svg element will explicitly use the width and height attributes of the use element (the use element does not have these attributes, which is 100%);

(5) Deeply copy the graphic content of the referenced symbol element into the replaced svg.

In this case, the visual effect is equivalent to:

(1) Change the use element to the g element;

(2) Move all the properties of use except x, y, width, height, xlink:href to the g element;

(3) Turn the x and y attributes of use into translate(x,y), and append to the last transform attribute of the g element;

(4) Copy the referenced svg element including the content. This svg element will explicitly use the width and height attributes of the use element (the use element does not have these attributes and uses the original value);

The visual effect in these cases is equivalent to:

(1) Change the use element to the g element;

(2) Move all the properties of use except x, y, width, height, xlink:href to the g element;

(3) Turn the x and y attributes of use into translate(x,y), and append to the last transform attribute of the g element;

(4) Copy the referenced elements;

<svgwidth="10cm"height="3cm"viewBox="0010030"version="1.1"

xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">

<desc>ExampleUse03-'use'witha'transform'attribute</desc>

<defs>

<rectid="MyRect"x="0"y="0"width="60"height="10"/>

</defs>

<rectx=".1"y=".1"width="99.8"height="29.8"

fill="none"stroke="blue"stroke-width=".2"/>

<usexlink:href="#MyRect"

transform="translate(20,2.5)rotate(10)"/>

</svg>

<svgwidth="10cm"height="3cm"viewBox="0010030"

xmlns="http://www.w3.org/2000/svg"version="1.1">

<desc>ExampleUse03-'use'witha'transform'attribute</desc>

<rectx=".1"y=".1"width="99.8"height="29.8"

fill="none"stroke="blue"stroke-width=".2"/>

<gtransform="translate(20,2.5)rotate(10)">

<rectx="0"y="0"width="60"height="10"/>

</g>

</svg>

Script index: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Development Center: https://developer.mozilla.org/en/SVG

Popular reference: http://www.chinasvg.com/

Official document: http://www.w3.org/TR/SVG11/