<defs>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<defs> 要素は、後で使用するグラフィックオブジェクトを格納するために使われます。 <defs> 要素内に作成されたオブジェクトは直接レンダリングされません。オブジェクトを表示するには（例えば <use> 要素で）参照する必要があります。

グラフィックオブジェクトはどこからでも参照することができますが、これらのオブジェクトを <defs> 要素の内部で定義することは SVG コンテンツの理解しやすさを促進し、文書全体のアクセシビリティに有益です。

例

html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Some graphical objects to use -->
  <defs>
    <circle id="myCircle" cx="0" cy="0" r="5" />

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my graphical objects -->
  <use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
</svg>

利用コンテキスト

カテゴリーコンテナー要素、構造的要素
許可されている内容任意の数、任意の順序の以下の要素。
アニメーション要素
説明的要素
図形要素
構造的要素
グラデーション要素
<a>、<clipPath>、<cursor>、<filter>、<font>、<font-face>、<foreignObject>、<image>、<marker>、<mask>、<pattern>、<script>、<style>、<switch>、<text>、<view>

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# Head

ブラウザーの互換性

BCD tables only load in the browser