"<defs>"

Container for definitions of reusable graphics elements.

It is not rendered directly, but its child elements can be referenced by a "&lt;use&gt;" or within a fill or stroke.

• DOM object: SVGDefsElement
• SVG2 spec: https://www.w3.org/TR/SVG2/struct.html#DefsElement

The <defs> element is SVG's "library" section: a place to declare reusable building blocks that should not be drawn where they appear. Anything inside <defs> is parsed and kept in memory, but is only rendered when something else explicitly references it — paint servers via fill="url(#id)" or stroke="url(#id)", <use> elements via href="#id", filters via filter="url(#id)", and so on.

By convention, almost all reusable content lives inside <defs>: "<linearGradient>" and "<radialGradient>" paint servers, "<pattern>" tiles, "<filter>" effects, "<clipPath>" and "<mask>" regions, "<marker>" arrowheads, and "&lt;symbol&gt;" templates. Using <defs> keeps the drawable part of your document clean and signals intent to both tools and human readers.

<svg width="300" height="160">
  <defs>
    <linearGradient id="MyGradient" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#6cf" />
      <stop offset="100%" stop-color="#f6c" />
    </linearGradient>
  </defs>
  <rect x="170" y="30" width="110" height="100" fill="url(#MyGradient)" />
</svg>

The <defs> block itself is never rendered, but its children are referenced elsewhere via id. In the diagram below, the gradient is defined inside <defs> (left) and then referenced by the rectangle (right) via fill="url(#MyGradient)".