SVG 'defs' element

The <defs> element is a container element for referenced elements. By putting graphical objects between the beginning and ending <defs> tags, you instruct SVG to define them without displaying them.

According to the SVG 1.1 Recommendation it is recommended to put all objects that you wish to re-use within a <defs> element so that SVG viewers can process data more efficiently.

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="50" y="100" width="100" height="100" />
<polyline points="50 100 100 25 150 100" />
</g>
<g id="window" fill="lightblue" stroke="black" stroke-width="2">
<rect x="75" y="125" width="50" height="50" />
<line x1="100" y1="125" x2="100" y2="175" />
<line x1="75" y1="150" x2="125" y2="150" />
</g>
<polyline points="60 85 60 25 75 25 75 62.5" id="chimney" stroke="black" stroke-width="2" fill="black" />
</defs>
<use xlink:href="#house"/<
<use xlink:href="#window"/>
<use xlink:href="#chimney"/>
</svg>