This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.


Overview Table

DOM Interface


In the following code example, the onclick event attribute on the circle element calls the circle_click function.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
<svg width="6cm" height="5cm" viewBox="0 0 600 500" xmlns="" version="1.1">
  <desc>Invoke an ECMAScript function from an onclick event</desc>
  <!-- ECMAScript to change the radius with each click. -->
  <script type="application/ecmascript">
    function circle_click(evt) {
      var circle =;
      var currentRadius = circle.getAttribute("r");
      if (currentRadius == 100)
        circle.setAttribute("r", currentRadius*2);
        circle.setAttribute("r", currentRadius*0.5);
  <!-- 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="blue"/>
  <text x="300" y="480"
        font-family="Verdana" font-size="35" text-anchor="middle">
    Click on circle to change its size



Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent core HTML attributes, properties, events, methods, and styles.

A script element is equivalent to the script element in HTML and is the place for scripts (for example, ECMAScript). Any functions that you define within any script element have a global scope across the entire current document.

Standards information


The SVGScriptElement object has these events:

  • onload: Occurs when the browser has fully parsed the element and all of its descendants.

The SVGScriptElement object has these properties:

  • externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
  • href: Gets an xlink:href attribute of an element.
  • type: Gets the scripting language for the given script element.