SVG 'use' element

The <use> element is used for graphics with repeated parts (elements). Another elements can be re-used via the <use> element. The <use> element references another element and indicates that the graphical contents of that element is included/drawn at that given point in the document. The <use> element has the following attributes:

  • x, y, width and height are optional attributes that define the rectangle to draw referenced content.
  • xlink:href attribute reference to the graphics to be drawn.The <use> element is not restricted to using objects from the same file in which it occurs. The xlink:href attribute may specify any valid file or URI.

Here is a simple example:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<g id="house" fill="grey" stroke="black" stroke-width="2">
<rect x="25" y="75" width="75" height="75" />
<polyline points="25 75 62.5 12.5 100 75" />
</g>
<g id="window" fill="lightblue" stroke="black" stroke-width="1">
<rect x="50" y="100" width="25" height="25" />
<line x1="62.5" y1="100" x2="62.5" y2="125" />
<line x1="50" y1="112.5" x2="75" y2="112.5" />
</g>
<polyline points="33 63 33 25 42 25 42 46" id="chimney" stroke="black" 
	  stroke-width="2" fill="black" />
</defs>
<use xlink:href="#house" x="-10" y="-10"/>
<use xlink:href="#window" x="-10" y="-10"/>
<use xlink:href="#chimney" x="-10" y="-10"/>
</svg>

Here is the resulting image:

Compare the resulting image with the following example:

...
<use xlink:href="#house" x="-10" y="-10"/>
<use xlink:href="#window" x="-10" y="-10"/>
...