Firefox Tomorrow

svg element

<script>

View on MDN ↗

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

Attributes

  • async Experimental
    • : 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
  • defer Experimental
    • : 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 Experimental
    • : 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>
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also