SVG - Interactivity


SVG images can be made responsive to user actions. SVG supports pointer events, keyboard events and document events. Consider the following example.


   <title>SVG Interactivity</title>
      <h1>Sample Interactivity</h1>
      <svg width="600" height="600">
         <script type="text/JavaScript">
               function showColor() {
                  alert("Color of the Rectangle is: "+
               function showArea(event){
                  var width = parseFloat(,"width"));
                  var height = parseFloat(,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
            <text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>


  • SVG supports JavaScript/ECMAScript functions. Script block is to be in CDATA block consider character data support in XML.

  • SVG elements support mouse events, keyboard events. We've used onClick event to call a javascript functions.

  • In javascript functions, document represents SVG document and can be used to get the SVG elements.

  • In javascript functions, event represents current event and can be used to get the target element on which event got raised.


Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering. Click on each text and rectangle to see the result.