<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'sscript element is equivalent to the HTML<script> element, it has some discrepancies, like it uses thehref attribute instead ofsrc 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 definesCORS settings as define for the HTML<script> element.Value type:[ anonymous | use-credentials ]?;Default value:?;Animatable:yes

fetchpriorityExperimental 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

TheURL 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:hrefDeprecated

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

DOM Interface

This element implements theSVGScriptElement interface.

Example

html

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>