"<use>"

Reuses an existing element by referencing it with a URI. This is useful for creating repeating patterns or reusing complex shapes.

• DOM object: SVGUseElement
• SVG spec: https://www.w3.org/TR/SVG2/struct.html#UseElement

The <use> element references another element, a copy of which is rendered in place of the <use> in the document. The referenced element may be a container element, in which case a copy of the complete SVG document subtree rooted at that element is used.

The cloned content inherits styles from the <use> element. However, these cloned element instances remain linked to the referenced source and reflect DOM mutations in the original.

<svg width="200" height="100">
  <circle id="a" cx="50" cy="50" r="40" stroke="blue" />
  <use href="#a" x="100" fill="blue" />
</svg>

Attribute	Default	Description
x	0	X coordinate to position the referenced element.
y	0	Y coordinate to position the referenced element.
width	auto	Width of the referenced element.
height	auto	Height of the referenced element.
href	(none)	URI to the element to reuse.