 | Level: Intermediate Andrew Watt (SVGDeveloper@aol.com), Independent Conultant
27 Jun 2003 Scalable Vector Graphics (SVG) is an XML application language which describes 2D vector graphics. SVG includes animation and scripting functionality. Scripting of SVG images provides powerful and flexible interactivity to add value to images on SVG-enabled Web sites. In addition, SVG images can be created dynamically from XML data, for example from an XML-enabled relational database management system, using XSLT and other technologies. This tutorial demonstrates the use of JavaScript to enable users to dynamically control the content and appearance of a floor plan rendered using SVG.
Prerequisites
You'll need JavaScript enabled in your browser. Readers should have read the Introduction to SVG tutorial here on developerWorks, or have some similar understanding of SVG fundamentals. Some previous knowledge of JavaScript and XSLT is also advantageous.
System requirements
The tutorial shows you how to build HTML, SVG, and XSLT documents. To follow along you need a text editor, an SVG viewer, and an XSLT engine:
-
A plain text editor is all you need to create SVG files. XML-enabled text editors which can check for well-formedness and/or validity are very useful for detecting coding errors but are not necessary.
-
An SVG viewer: The most widely used SVG viewer at the time of this writing is Adobe's SVG Viewer, version 3.0, which is available for free at http://www.adobe.com/svg/viewer/install/main.html. Other SVG viewers are listed in the tutorial Resources.
-
A browser: The Adobe viewer works best with Microsoft Internet Explorer 5.x and above, and also with Netscape Navigator 4.x and above. The Adobe SVG Viewer version 3 does not work reliably with Mozilla 1.0 and above, particularly when scripting code is present.
-
An XSLT processor: The Saxon XSLT processor is used for this example. It can be downloaded from http://saxon.sourceforge.net/.
Duration
Under one hour
Formats html, pdf
| | | |
