<script>

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

<script> は SVG の要素で、スクリプトを SVG 文書に追加することができます。

メモ: SVG の script 要素は HTML の <script> 要素と同等ですが、href 属性を src の代わりに使用したり、 ECMAScript モジュールには今のところ対応していないなど、いくつかの相違点があります（詳細は下記のブラウザーの互換性を参照してください）。

使用コンテキスト

カテゴリー	無し
許可されている内容	あらゆる要素や文字データ

属性

crossorigin

この属性は、CORS 設定を HTML の <script> 要素と同様に定義します。 値の型: [ anonymous | use-credentials ]?; デフォルト値: ?; アニメーション: 可

fetchpriority

外部スクリプトを取得する際に使用する相対的な優先順位に対するヒントを提供します。利用可能な値は次の通りです。

high: この外部スクリプトを、他の外部スクリプトに比べて高い優先度で取得します。
low: この外部スクリプトを、他の外部スクリプトに比べて低い優先度で取得します。
auto: 取得の優先度に関する設定は行われません。値が設定されていない場合、または無効な値が設定されている場合に使用されます。これがデフォルトです。

href

読み込むスクリプトの URL です。 値の型: <URL>; デフォルト値: なし; アニメーション: 不可

type

この属性は使用するスクリプト言語の型を定義します。 値の型: <media-type>; デフォルト値: application/ecmascript; アニメーション: 不可

xlink:href

読み込むスクリプトの URL です。 値の型: <URL>; デフォルト値: なし; アニメーション: 不可

DOM インターフェイス

この要素は、SVGScriptElement インターフェイスを実装しています。

例

html

円をクリックすると色が変わります。
<svg
  viewBox="0 0 10 10"
  height="120px"
  width="120px"
  xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4" />

  <script>
    // <![CDATA[
    function getColor() {
      const R = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      const G = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      const B = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      return `#${R}${G}${B}`;
    }

    document.querySelector("circle").addEventListener("click", (e) => {
      e.target.style.fill = getColor();
    });
    // ]]>
  </script>
</svg>