JavaScript programming with SVG

SVG is fully scriptable and support javascript, also known as ecmascript.

Below is an example showing how SVG implements remote and inline script invocation.

      1 <?xml version="1.0" standalone="yes"?>
      2 <!DOCTYPE svg
      3 PUBLIC "-//W3C//DTD SVG 1.1//EN"
      4 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      5 <svg
      6     xmlns="http://www.w3.org/2000/svg"
      7     xmlns:xlink="http://www.w3.org/1999/xlink"
      8     width="100" height="100">
      9
     10 <!-- invoking an external javascript file. Note that this file needs to actually exist -->
     11 <script id="externalExample" xlink:href="alert.js"/>
     12
     13 <!-- invoking ecmascript inline -->
     14 <script id="inlineExample">
     15     <![CDATA[
     16         var MyVariable = 100;
     17         function sendAlert1(text) {
     18             alert('This is an alert'+text);
     19         }
     20     ]]></script>
     21   <circle fill="red" stroke="yellow" id="myCircle1" cx="20%" cy="80%" r="10%" onclick="sendAlert1('test1')"/>
     22   <circle fill="yellow" stroke="red" id="myCircle2" cx="80%" cy="20%" r="10%" onclick="sendAlert2('test2')"/>
     23 </svg>

Click on the buttons in the iframe below to see the sendAlert1 and sendAlert2 implemented.

* scriptexample.svg: svg script example with inline and externally referenced ecmascript

* alert.js: referenced external ecmascript file

Also see:

* Programming, examples, and presentations - Various presentations, samples, and programming tutorials collected over time by RO IT Systems

-- RonanOger - 05 Feb 2009