SVG defs Element

The SVG <defs> element is used to embed definitions that can be reused inside an SVG image.

Using the SVG <defs> elements you can group SVG shapes together and reuse them as a single shape.

The shapes defined inside the <defs> element will be displayed when you reference it by a <use> element.

Example

<!DOCTYPE html>
<html>
   <body>
   
<svg>
  <defs>
    <g id="shape">
        <rect x="40" y="40" width="40" height="40" />
        <circle cx="40" cy="40" r="40" />
    </g>
  </defs>

  <use xlink:href="#shape" x="40" y="40" />
  <use xlink:href="#shape" x="160" y="40" />

</svg>

</body>
</html>

Test it Now

Explanation

The id attribute of <g> defines a unique name.
The <use> element references the <g> element through its xlink:href attribute.
The # symbol defines the attribute value.
The <use> element is used to specify that where to show the reused shapes via its x and y attributes.

Next TopicSVG Symbol Element

← prev next →