SVG Open / Carto.net
Developers Conference

Zurich, Switzerland - July 15-17, 2002

Christian Wenz
Libauer Str. 2
81927 Munich
Germany
E-Mail: christian@wenz.org
Tel.: +49 172 8118774
Fax: +49 8151 89408

Tobias Hauser
Prinz-Karl-Straße 30b
82319 Starnberg
Germany
E-Mail: TobiHauser@compuserve.com
Tel.: +49 171 4811976
Fax: +49 8151 21146

Topic of presentation: Scripting SVG

Intention: Show the scripting capabilities of SVG, how to implement them, and some examples

Motivation: SVG itself is very powerful, and a lot of reasons for that will be presented at the SVG Open / Carto.net Developers Conference. However in order to compete with Flash, developers need tools to match with ActionScript. ActionScript extends the functionality of Flash with scripting capabilities, using an embedded scripting engine. JavaScript - or its standardization ECMAScript - is a tool that is very similar to ActionScript (and even the language the designers of ActionScript had in mind when creating their language), and JavaScript support is a vital ingredient to a truly dynamic SVG animation. Quite a lot of web designers know JavaScript fairly well as it is the most widely used client-side scripting language.
With its <script> element, SVG is ready for inclusion of ECMAScript code. The currently most widely used SVG viewer, Adobe SVG Viewer, supports ECMAScript and even gives the programmer the choice between using the browser's script engine and the viewer's built-in script engine.

Abstract: The talk is planned to consist out of these parts:

  1. DOM: Understanding of DOM Level 2 is very important for scripting SVG. So first a short overview is given about what DOM Level 2 is, including the DOM's tree structure and the handling of DOM events. Then we have a closer look at the SVG DOM and its specialities.
  2. Embedding scripts: Using the <script> element, ECMAScript code can be embedded into SVG documents.
  3. Accessing SVG elements: Accessing SVG elements from script code is fairly easy, once you know how to do it. In this section we present a standard procedure to gain access to SVG elements and show some examples.
  4. Animation using SVG: With the mighty functionality of ECMAScript you can generate things you could not do using "plain" SVG. As an example, we present an animated analogous clock showing the current time of the client machine.
  5. From SVG to HTML and back: From within the SVG scripting code, HTML elements can be accessed; it is also possible to access SVG elements from HTML code. In this final part of the talk we show both ways.

Conclusion: SVG will never look the same to you once you have seen what it can do using ECMAScript.
For presentation we will use Adobe SVG Viewer, since this viewer currently is the most widely used one (Adobe is shipping it with all its software products). However we will also mention other script-enabled viewers. Since the talk is only 30 minutes long, we proceed quite quickly through the various topics but are always presenting small examples that show the "nitty-gritty" of the topic, enabling the listeners to use these techniques for their own, probably more complex applications.

Alternative version: An alternative would be to split this talk up into two sessions; the first one giving the basics (DOM, embedding scripts, accessing elements), whereas the second one is about more sophisticated topics (animation, HTML->SVG and SVG<-HTML).

About the presenters: