Skip to main content

By clicking Submit, you agree to the developerWorks terms of use.

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.

  • Close [x]

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.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

  • Close [x]

Select a language:

  • Close [x]
  • Close [x]

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.

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

Activity:  15244 views
Comments:  

Summary

Tutorial summary

Because of its structure as an XML document, an SVG image can be both created dynamically and manipulated interactively by a user. This tutorial has demonstrated the use of ECMAScript/JavaScript to enable interaction with an SVG image. It has also discussed dynamically producing an SVG image.

Topics included:

  • Producing a simplified floor plan in SVG
  • Embedding the SVG in an HTML document and communicating events in the HTML document to the SVG image
  • Discussion of the SVG viewBox attribute and how to use it to control scrolling of SVG
  • Scrolling between rooms using ECMAScript scripting
  • Deleting parts of the floor plan under script control
  • Adding new parts of the document under script control
  • Dynamically generating SVG using XSLT

Using ECMAScript and XSLT with SVG is a powerful and flexible approach to creating interactive SVG dynamically. This tutorial has introduced you to techniques that you can apply in larger projects.

7 of 9 | Previous | Next

Comments

Back to top

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=

Table of contents

7 of 9 | Previous | Next

Local resources

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).

My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

 

Dig deeper into XML on developerWorks

Try IBM PureSystems. No charge.

IBM PureSystems on a kaleideoscope background

Experience today!

Get started with the cloud-based trial and pattern development kit.

Share this page:

  • Close [x]

Follow developerWorks:

  • Close [x]