SVG <defs> Element

The SVG <defs> element is used to embed definitions that can be reused within an SVG image. For example, you can group SVG shapes together and then reuse them as a single shape.

defs example

Here is a simple example of a <defs> element:

<svg>
　　　　<defs>
　　　　　　　　<g>
　　　　　　　　　　　　<rect x="100"y="100"width="100"height="100"　/>
　　　　　　　　　　　　<circle cx="100"cy="100"r="100"　/>
　　　　　　　　</g>
　　　　</defs>
</svg>

Shapes defined within the <defs> element do not appear in the SVG image. They must be referenced by a <use> element before they can be displayed. Here is an example:

<svg width="500"height="100">
　　　　<defs>
　　　　　　　　<g id="shape">
　　　　　　　　　　　　<rect x="0" y="0" width="50"height="50"></rect>
　　　　　　　　　　　　<circle cx="0" cy="0" r="50"></circle>
　　　　　　　　</g>
　　　　</defs>
　　　　<use xlink:href="#shape" x="50"y="50"></use>
　　　　<use xlink:href="#shape" x="200"y="50"></use>
　　　　<circle cx="50"cy="50"r="5"style="fill:#0000ff;"/circle>
　　　　<circle cx="200"cy="50"r="5"style="fill:#0000ff;"/circle>
</svg>

Before you can refer to the <g> element, you must set an ID for it through its id attribute. The <use> element refers to the <g> element through its xlink:href attribute. Note the '#' before the ID in the attribute value.

The <use> element specifies where to display the repeated shape by its x and y attributes. Note that the shapes inside the <g> element are located at 0,0. This is because their positions have been added to the position specified in the <use> element.

Image effect after running:

The blue dot is not in the example. It is added to show the x and y of two <use> elements.

Which elements can be defined in the defs element?

You can put the following elements inside the <defs> element:

• Any shape element (rect, line, etc.)

• g

• symbol