<script>

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

CategoriesNone
Permitted contentAny elements or character data

Attributes

async

If the async attribute is present, then the external script will be fetched in parallel to parsing and evaluated as soon as it is available. Equivalent to the async attribute on the HTML <script> element. Value type: boolean; Default value: none; Animatable: no

crossorigin

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

defer

If the defer attribute is present, then the external script will be executed after the document has been parsed, but before firing DOMContentLoaded. Equivalent to the defer attribute on the HTML <script> element. Value type: boolean; Default value: none; Animatable: no

fetchpriority

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

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

DOM Interface

This element implements the SVGScriptElement 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>

Specifications

See also