The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

Interactive, dynamic Scalable Vector Graphics

Generate graphics from XML and XSLT

Andrew Watt (SVGDeveloper@aol.com), Independent Conultant

Andrew Watt is an independent consultant with an interest and expertise in XML technologies. He wrote the world's first book on SVG, Designing SVG Web Graphics (New Riders), and was lead author for SVG Unleashed (Sams Publishing) as well as being an author of several books on XML and Web technologies. He has two all-SVG Web sites at http://www.xmml.com/ and http://www.edititwrite.com/ which demonstrate how SVG can be used to create useful sites. You contact Andrew at SVGDeveloper@aol.com.

Summary: This tutorial is for developers who want to use Scalable Vector Graphics (SVG) to create interactive SVG graphics and to produce such SVG images from an XML file using XSLT. It discusses the use of ECMAScript (JavaScript) to enable users to interact with and change an existing SVG image in real time without reloading the browser page. It also demonstrates linking from an SVG element.

Tag this!

Date: 27 Jun 2003
Level: Intermediate
PDF: A4 and Letter (498 KB | 38 pages)Get Adobe® Reader®

Activity: 13366 views
Comments:

Introduction

Should I take this tutorial?

This tutorial is for developers who want to use Scalable Vector Graphics (SVG) to create interactive SVG graphics and to produce such SVG images from an XML file using XSLT. It discusses the use of ECMAScript (JavaScript) to enable users to interact with and change an existing SVG image in real time without reloading the browser page. It also demonstrates linking from an SVG element.

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.

What is this tutorial about?

SVG is a powerful visual tool ideally suited to display data held as XML. This tutorial demonstrates the use of SVG to display a simplified interactive floor plan. JavaScript provides interactivity in SVG images in this tutorial, enabling visitors to the Web page to zoom in and out of the image, scroll between rooms, and perform additional functions. The tutorial covers:

Creating the initial SVG image
Zooming in and out of the image
Using JavaScript to scroll the image from room to room
Deleting SVG elements
Adding new SVG elements
Linking from an SVG element to another document
Generating the SVG document dynamically using XSLT

Tools

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 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/.

Comments

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/

SITE_ID=1

Zone=XML

ArticleID=138236

TutorialTitle=Interactive, dynamic Scalable Vector Graphics

publish-date=06272003

author1-email=SVGDeveloper@aol.com

author1-email-cc=