<defs>

Container for definitions of reusable graphics elements.

It is not rendered directly, but its child elements can be referenced by a <use> 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 <symbol> 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)".