ContextQMD
Back to Content

Index

files/en-us/web/svg/reference/element/script/index.md

latest3.1 KB
Original Source

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

[!NOTE] While SVG's script element is equivalent to the HTML {{HTMLElement('script')}} element, it has some discrepancies, like it uses the {{SVGAttr('href')}} attribute instead of src and it doesn't support ECMAScript modules so far (See browser compatibility below for details)

Usage context

{{svginfo}}

Attributes

  • crossorigin
  • {{SVGAttr("fetchpriority")}} {{experimental_inline}} {{non-standard_inline}}
    • : 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.
  • {{SVGAttr("href")}}
    • : The {{Glossary("URL")}} to the script to load. Value type: <URL>; Default value: none; Animatable: no
  • {{SVGAttr("type")}}
    • : This attribute defines type of the script language to use. Value type: <media-type>; Default value: application/ecmascript; Animatable: no
  • {{SVGAttr("xlink:href")}} {{deprecated_inline}}
    • : The {{Glossary("URL")}} to the script to load. Value type: <URL>; Default value: none; Animatable: no

DOM Interface

This element implements the {{domxref("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>

{{EmbedLiveSample('Example', 150, '100%')}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also