SVG has separate document’s structure from its presentation. In the previous post, I have already described on
different methods used in styling SVG document. In this post I am going to explain on some SVG elements that you can use to make your document’s structure clearer, more readable and easier to maintain. SVG has some elements that let you make groups of shapes and lines that form recognizable named objects, this sort of grouping makes your documents more structured and understandable. Some of the basic elements used in SVG document structure are as follows.
Grouping <g> element
The <g> element is a container element for grouping together related graphics elements.It gathers all of its child elements as a group, and often has an id attribute to give that group a unique name. Along with the ability to group, the <g> element also provides notational convenience. Any styles you specify in the starting <g> tag will apply to all the child elements in the group.Following is an example of using <g> element in svg, where <g> element groups rectangle, triangle and circle with applying fill and stroke color red for all the shapes in first group and blue color in second group.
<svg xmlns=”http://www.w3.org/2000/svg”>
<g id=”group1″ fill=”red” >
<rect x=”15″ y=”10″ width=”60″ height=”60″ />
<polygon points=”140,10 100,70 170,70″ />
<circle r=”30″ cx=”240″ cy=”40″/>
</g>
<g id=”group2″ fill=”blue” >
<rect x=”15″ y=”80″ width=”60″ height=”60″ />
<polygon points=”140,80 100,140 170,140″ />
<circle r=”30″ cx=”240″ cy=”110″/>
</g>
<rect width=”280″ height=”150″
fill=”none” stroke=”blue” stroke-width=”2″ />
</svg>
<desc> and <title> elements
While creating SVG document you can supply description <desc> and/or title <title> element in each container element or graphics element, where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, <desc> and <title> elements are not rendered as part of the graphics.Following is an example where the browser would not render the <desc> and <title> elements but would render the remaining contents of the <g> element. However you can view title assigned to each shape on mouse-over.
<svg xmlns=”http://www.w3.org/2000/svg”>
<desc>This is first group which fills red</desc>
<g id=”group1″ fill=”red” >
<rect x=”15″ y=”10″ width=”60″ height=”60″>
<title>Red Rectangle</title></rect>
<polygon points=”140,10 100,70 170,70″>
<title>Red triangle</title></polygon>
<circle r=”30″ cx=”240″ cy=”40″>
<title>Red circle</title></circle>
</g>
<desc>This is second group which fills red</desc>
<g id=”group2″ fill=”blue” >
<rect x=”15″ y=”80″ width=”60″ height=”60″>
<title>Blue Rectangle</title></rect>
<polygon points=”140,80 100,140 170,140″>
<title>Blue Triangle</title></polygon>
<circle r=”30″ cx=”240″ cy=”110″>
<title>Blue circle</title></circle>
</g>
<rect width=”280″ height=”150″
fill=”none” stroke=”blue” stroke-width=”2″ />
</svg>
This is first group which fills red
Red Rectangle
Red triangle
Red circle
This is second group which fills red
Blue Rectangle
Blue Triangle
Blue circle
<use> element
The <use> element references another element and indicates that the graphical contents of that element is included at that given point in the document. The SVG <use> element gives you an analogous copy-and-paste ability with a group that you’ve defined with <g>.The <use> element has optional attributes x, y, width and height which are used to map the graphical contents of the referenced element onto a rectangular region.
Following is an example of using <use> element in svg, where <use> element copy and paste all the shapes of both groups and sets its position 20px right and 10px bottom from the original shapes.
<svg xmlns=”http://www.w3.org/2000/svg”>
<g id=”group1″ fill=”red” >
<rect x=”15″ y=”10″ width=”60″ height=”60″ />
<polygon points=”140,10 100,70 170,70″ />
<circle r=”30″ cx=”240″ cy=”40″/>
</g>
<g id=”group2″ fill=”blue” >
<rect x=”15″ y=”80″ width=”60″ height=”60″ />
<polygon points=”140,80 100,140 170,140″ />
<circle r=”30″ cx=”240″ cy=”110″/>
</g>
<rect width=”280″ height=”150″
fill=”none” stroke=”blue” stroke-width=”2″ />
<use xlink:href=”#group1″ x=”20″ y=”10″/>
<use xlink:href=”#group2″ x=”20″ y=”10″/>
</svg>
<defs> element
The <defs> element is a container element for referenced elements. Any element that can be a child of a <g> can also be a child of a <defs> because of the content model for <defs> is the same as for the <g> element. Elements that are descendants of a <defs> are not rendered directly. You can instruct SVG to define them by putting the grouped objects between the beginning and ending <defs> tags without displaying them.The descendants of a <defs> are always present in the source tree and thus can always be referenced by other elements.Following is an example of using <defs> element in svg, where <defs> element hides all the shapes of both groups by putting <g> element between the beginning and ending <defs> tags. And <use> element is used to display both groups and sets its position 20px right and 10px bottom from the position of original shapes.
<svg xmlns=”http://www.w3.org/2000/svg”>
<defs>
<g id=”group1″ fill=”red” >
<rect x=”15″ y=”10″ width=”60″ height=”60″ />
<polygon points=”140,10 100,70 170,70″ />
<circle r=”30″ cx=”240″ cy=”40″/>
</g>
<g id=”group2″ fill=”blue” >
<rect x=”15″ y=”80″ width=”60″ height=”60″ />
<polygon points=”140,80 100,140 170,140″ />
<circle r=”30″ cx=”240″ cy=”110″/>
</g>
</defs>
<rect width=”280″ height=”150″
fill=”none” stroke=”blue” stroke-width=”2″ />
<use xlink:href=”#group1″ x=”20″ y=”10″/>
<use xlink:href=”#group2″ x=”20″ y=”10″/>
</svg>
<symbol> element
The <symbol> element is used to define graphical template objects which can be instantiated by a <use> element. It is a another way of grouping elements. Unlike the <g> element, a <symbol> is never displayed, so you don’t have to enclose it in a <defs> specification.The use of <symbol> elements for graphics that are used multiple times in the same document adds structure and semantics.In the following example instead of using <defs> and <g> element <symbol> element is used and it is displayed by using <use> element.
<svg xmlns=”http://www.w3.org/2000/svg”>
<symbol id=”group1″ fill=”red” >
<rect x=”15″ y=”10″ width=”60″ height=”60″ />
<polygon points=”140,10 100,70 170,70″ />
<circle r=”30″ cx=”240″ cy=”40″/>
</symbol>
<symbol id=”group2″ fill=”blue” >
<rect x=”15″ y=”80″ width=”60″ height=”60″ />
<polygon points=”140,80 100,140 170,140″ />
<circle r=”30″ cx=”240″ cy=”110″/>
</symbol>
<rect width=”280″ height=”150″
fill=”none” stroke=”blue” stroke-width=”2″ />
<use xlink:href=”#group1″ x=”20″ y=”10″/>
<use xlink:href=”#group2″ x=”20″ y=”10″/>
</svg>
<image> element
While <use> lets you re-use a portion of an SVG file, the <image> element includes an entire SVG or raster file are to be rendered into a given rectangle. If you are including an SVG file, the x, y, width, and height attributes establish the view-port in which the referenced file will be drawn. If you are including a raster file, it will be scaled to fit the rectangle that the attributes specify. You can currently include either JPEG or PNG raster files.The attributes ‘x’ and ‘y’ are the x and y axis coordinate of one corner of the rectangular region into which the referenced document is placed. If the attribute is not specified, the effect is as if a value of “0” were specified. And the attributes ‘width’ and ‘height’ are the width and height of the rectangular region into which the referenced document is placed. A value of zero disables rendering of the element.In the following example external image is inserted with specifying its position, width and height within ellipse drawn on svg.
<svg width=”250″ height=”200″>
<ellipse cx=”124″ cy=”100″ rx=”110″ ry=”92″ style=”fill: #999;”/>
<ellipse cx=”120″ cy=”100″ rx=”110″ ry=”90″ style=”fill: #00aaff;”/>
<desc>This graphic links to an external image</desc>
<image xlink:href=”image1.jpg” x=”50″ y=”20″
width=”150″ height=”140″>
<title>My image</title>
</image>
</svg>
This graphic links to an external image
My image
