SVG and JavaScript

SVG provides native support for JavaScript (e.g., ECMAScript). Ultimately, this enables the dynamic creation of SVG content as described in the next section. It also allows for some more precise modification of and control of existing SVG objects.

effects Standalone SVG JavaS
used?

Using HTML/JavaScript to change SVG

SVG tags used/JavaScript
user actions change simple attributes of SVG objects Adjust attributes Tiny Adjusting simple attributes of SVG objects
<rect>
<path>
f="fill" 
O.setAttribute(f,"red")

In the next example, we modify the visibility of a user selected object.

SVG Code Illustration
Using JavaScript to change the visibility objects

The onload="startup(evt);" statement activates a JavaScript function when the SVG document loads that find the crucial document elements. The statement "var svgDocument;" declares  a global variable name so that we may traverse the SVG DOM.

svgDocument = evt.target.ownerDocument;

is a somewhat convoluted way of referring to the document itself.

The fact that we may now explore the SVG DOM and adjust any attribute of any object inside it, (through “getElementById” or other methods) means that the full force of a very sophisticated and modern programming language is immediately at our disposal. We may rewrite strings, using JavaScript’s regular expression apparatus, position things randomly, and compute to our heart’s content.