Scripting

Specifying the scripting language

Specifying the default scripting language

The 'svg/contentScriptType' attribute on the 'svg' element specifies the default scripting language for the given document fragment.

contentScriptType = "content-type"
Identifies the default scripting language for the given SVG document fragment. This attribute sets the default scripting language used to process the value strings in event attributes. This language must be used for all instances of script that do not specify their own scripting language. The value content-type specifies a media type, per MIME Part Two: Media Types [RFC2046]. The default value is 'application/ecmascript' [RFC4329].
Animatable: no.

Local declaration of a scripting language

It is also possible to specify the scripting language for each individual 'script' element by specifying a 'script/type' on the 'script' element.

The 'script' element

A 'script' element is equivalent to the 'script' element in HTML and thus is the place for scripts (e.g., ECMAScript). Any functions defined within any 'script' element have a "global" scope across the entire current document.

Example script01 defines a function circle_click which is called by the 'onclick' event attribute on the 'circle' element. The drawing below on the left is the initial image. The drawing below on the right shows the result after clicking on the circle.

Note that this example demonstrates the use of the 'onclick' event attribute for explanatory purposes. The example presupposes the presence of an input device with the same behavioral characteristics as a mouse, which will not always be the case. To support the widest range of users, the 'onactivate' event attribute should be used instead of the 'onclick' event attribute.

Before attempting to execute the 'script' element the resolved media type value for 'script/type' must be inspected. If the SVG user agent does not support the scripting language then the 'script' element must not be executed.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="6cm" height="5cm" viewBox="0 0 600 500"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example script01 - invoke an ECMAScript function from an onclick event
  </desc>
  <!-- ECMAScript to change the radius with each click -->
  <script type="application/ecmascript"> <![CDATA[
    function circle_click(evt) {
      var circle = evt.target;
      var currentRadius = circle.getAttribute("r");
      if (currentRadius == 100)
        circle.setAttribute("r", currentRadius*2);
      else
        circle.setAttribute("r", currentRadius*0.5);
    }
  ]]> </script>

  <!-- Outline the drawing area with a blue line -->
  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

  <!-- Act on each click event -->
  <circle onclick="circle_click(evt)" cx="300" cy="225" r="100"
          fill="red"/>

  <text x="300" y="480" 
        font-family="Verdana" font-size="35" text-anchor="middle">

    Click on circle to change its size
  </text>
</svg>
Example script01
Example script01 — invoke an ECMAScript function from an onclick event — before first click Example script01 — invoke an ECMAScript function from an onclick event — after first click

View this example as SVG (SVG-enabled browsers only)

Attribute definitions:

type = "content-type"
Identifies the scripting language for the given 'script' element. The value content-type specifies a media type, per Multipurpose Internet Mail Extensions (MIME) Part Two [RFC2046]. If a 'script/type' is not provided, the value of 'contentScriptType' on the 'svg' element shall be used, which in turn defaults to "application/ecmascript" [RFC4329]. If a 'script element' element falls outside of the outermost svg element and the 'script/type' is not provided, the 'script/type' must default to "application/ecmascript" [RFC4329].
Animatable: no.
xlink:href = "<iri>"
An IRI reference to an external resource containing the script code.
Animatable: no.

Event handling

Events can cause scripts to execute when either of the following has occurred:

Related sections of the spec:

Event attributes

The following event attributes are available on many SVG elements.

The complete list of events that are part of the SVG language and SVG DOM and descriptions of those events is provided in Complete list of supported events.

Event attribute for the SVGLoad event

Below is the definition for the 'g/onload' event attribute. It can be specified on all of the animation elements and most of the graphics elements and container elements. The 'g/onload' event attribute is classified as both a graphical event attribute and an animation event attribute. (See the definition for each element to determine whether it can have a graphical event attribute specified on it.)

Attribute definitions:

onload = "<anything>"
Specifies some script to execute when "bubbling" or "at target" phase listeners for the SVGLoad event are fired on the element the attribute is specified on.
Animatable: no.

Event attributes on graphics and container elements

Below are the definitions for the graphical event attributes. These can be specified on most graphics elements and container elements. (See the definition for each element to determine whether it can have a graphical event attribute specified on it.)

Note that 'g/onload', defined above, is also classified as a graphical event attribute.

Attribute definitions:

onfocusin = "<anything>"
onfocusout = "<anything>"
onactivate = "<anything>"
onclick = "<anything>"
onmousedown = "<anything>"
onmouseup = "<anything>"
onmouseover = "<anything>"
onmousemove = "<anything>"
onmouseout = "<anything>"
Specifies some script to execute when "bubbling" or "at target" phase listeners for the corresponding event are fired on the element the attribute is specified on. See the Complete list of support events to determine which event each of these event attributes corresponds to.
Animatable: no.

Document-level event attributes

Below are the definitions for the document event attributes. These can be specified only on 'svg' elements.

Attribute definitions:

onunload = "<anything>"
onabort = "<anything>"
onerror = "<anything>"
onresize = "<anything>"
onscroll = "<anything>"
onzoom = "<anything>"
Specifies some script to execute when "bubbling" or "at target" phase listeners for the corresponding event are fired on the element the attribute is specified on. See the Complete list of support events to determine which event each of these event attributes corresponds to.
Animatable: no.

Animation event attributes

Below are the definitions for the animation event attributes. These can be specified on the animation elements.

Note that 'g/onload', defined above, is also classified as an animation event attribute.

Attribute definitions:

onbegin = "<anything>"
onend = "<anything>"
onrepeat = "<anything>"
Specifies some script to execute when "bubbling" or "at target" phase listeners for the corresponding event are fired on the element the attribute is specified on. See the Complete list of support events to determine which event each of these event attributes corresponds to.
Animatable: no.

DOM interfaces

Interface SVGScriptElement

Interface SVGZoomEvent