<script>

Usage context

Attributes

crossorigin

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

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

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

Browser compatibility

See also

• fetchpriority attribute
• script element in HTML