<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.
Usage context
| Categories | None |
|---|---|
| Permitted content | Any elements or character data |
Attributes
crossorigin-
This attribute defines CORS 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:
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:hrefDeprecated-
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
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2> # ScriptElement> |
Browser compatibility
See also
fetchpriorityattributescriptelement in HTML