W3cubDocs

/SVG

<script>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

The <script> SVG element allows to add scripts to an SVG document.

Note: While SVG's script element is equivalent to the HTML <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ECMAScript modules so far (See browser compatibility below for details)

Usage context

Categories	None
Permitted content	Any elements or character data

Attributes

crossorigin

This attribute defines CORS settings as define for the HTML <script> element. Value type: [ anonymous | use-credentials ]?; Default value: ?; Animatable: yes

fetchpriority Experimental Non-standard

Provides a hint of the relative priority to use when fetching an external script. Allowed values:

high: Fetches the external script at a high priority relative to other external scripts.
low: Fetches the external script at a low priority relative to other external scripts.
auto: Doesn't set a preference for the fetch priority. It is used if no value or an invalid value is set. This is the default.

href

The URL to the script to load. Value type: <URL>; Default value: none; Animatable: no

type

This attribute defines type of the script language to use. Value type: <media-type>; Default value: application/ecmascript; Animatable: no

xlink:href Deprecated

The URL to the script to load. Value type: <URL>; Default value: none; Animatable: no

DOM Interface

This element implements the SVGScriptElement interface.

Example

Click the circle to change colors.
<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>

Specifications

Specification
Scalable Vector Graphics (SVG) 2> # ScriptElement>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`script`	1	12	1.5	9	3	18	4	10.1	2	1.0	3	2
`async`	No	No	117	No	No	No	117	No	No	No	No	No
`defer`	No	No	117	No	No	No	117	No	No	No	No	No
`fetchpriority`	No	No	140	No	No	No	140	No	No	No	No	No
`href`	50	12	51	37	12.1	50	51	37	12.2	5.0	50	12.2
`type`	1	79	1.5	15	3	18	4	14	2	1.0	4.4	2
`xlink_href`	1	79	1.5	15	3	18	4	14	2	1.0	4.4	2