Search /
Advanced search  |  Help  |  Site map
Click for Layer 8! No, really, click NOW!
Networking for Small Business
Heartbleed bug is irritating McAfee, Symantec, Kaspersky Lab
Server makers rushing out Heartbleed patches
6 Social Media Mistakes That Will Kill Your Career
4 Qualities to Look for in a Data Scientist
Big bucks going to universities to solve pressing cybersecurity issues
Mozilla appoints former marketing head to interim CEO
Box patches Heartbleed flaw in its cloud storage systems
Obama administration backs disclosing software vulnerabilities in most cases
6 Amazing Advances in Cloud Technology
Collaboration 2.0: Old meets new
Data breaches nail more US Internet users, regulation support rises
With a Wi-Fi cloud service, Ruckus aims to help hotspot owners make money
How to get Windows Phone 8.1 today
Secure browsers offer alternatives to Chrome, IE and Firefox
10 Big Data startups to watch
Big data drives 47% growth for top 50 public cloud companies
Here are the options with Heartbleed-flawed networking gear (Hint: there aren't many)
Akamai admits its OpenSSL patch was faulty, reissues keys
Second Google Glass user attacked in San Francisco in two months
Microsoft puts the squeeze on Windows to shoehorn it into 16GB devices
An unnecessary path to tech: A Bachelor's degree
Heartbleed Bug hits at heart of many Cisco, Juniper products
iPhone 6 rumor rollup for the week ending April 11

Wrapping up SVG

Gearhead archive

We promised to wrap up the topic of Scalable Vector Graphics and we'll do so discussing scripted animation. When we started with SVG a few weeks ago we discussed its use of declarative animation, where the animation is defined in the SVG file using Synchronized Multimedia Integration Language. While you can achieve a fantastic amount using declarative animation, you cannot interact with the user or anything outside the SVG graphic.

This is where scripted animation comes into play - specifically, JavaScript-driven animation. To manipulate SVG using JavaScript, we can embed the SVG graphic in the document that contains the JavaScript or embed the JavaScript in the SVG code. Either way, the key to scripting is to name all the elements we want to manipulate. For instance, in the second example we gave, we used the line:

<text style="fill:blue;" y="15">Gearhead was here.</text>

So to access this with JavaScript, we first have to do the following:

<text id="ghtext" style="fill:blue;" y="15">Gearhead was here.</text>

Next, assuming we're going to drive SVG display embedded in a document, we'd have to embed the SVG file in the body of the HTML document like this:

<EMBED NAME="mydoc" WIDTH="800" HEIGHT="600" SRC="">

The NAME argument provides an identity for the embedded document. Now we need to get pointers to the document and the element we want to change:

var svgdocument = doc.getSVGDocument();
svgtext = svgdocument.getElement ById('ghtext');

All we have provided is a glimpse of the mechanism used to animate SVG with JavaScript. The actual implementation is a little more complex, and we refer you to the Adobe tutorial for lots of code and examples.

By the way, you'll find on the Adobe site that a number of the examples use the function getstyle(). This turns out to be undesirable because, according to Jon Ferraiolo, SVG editor for Adobe Systems, "getStyle() is not part of the SVG spec" - hence our use of setattribute() above.

The point is to give you a taste of what is required to create animated SVG images. But one problem remains - how do you create the pictures?

Gearhead has been playing with Adobe's Illustrator 9.0, which, handily enough, can export SVG. As an illustration tool, the software is fantastic. The only letdown is on the SVG side. You can't import SVG files, and the JavaScript editing really only lets you attach JavaScript to elements. You'll have to go in afterward and refine your code.

A promising SVG tool in the beta stage is Jasc WebDraw, which offers a built-in script editor and can import SVG files.

We expect to see Illustrator, WebDraw and many other tools evolve rapidly to provide in-depth SVG support. Mark our words, SVG is a standard that will quickly become a key component of Web content.

Show us the graphics at


The other SVG articles:

Cool graphics in XML
The beauty of XML is it provides a whole new way of structuring 'stuff' that goes beyond just organizing data. ... Today, we'll look at one of the latest and most ... Network World, 6/4/01.

XML worth a thousand pics
Last week we were cruel and unusual - we gave you a chunk of Scalable Vector Graphics code but put off explaining it until this week.

Ready for animation
Last week we looked at a subset of the drawing features of the thoroughly marvelous standard-in-the-making, Scalable Vector Graphics. As you could see, creating graphics ... Network World, 6/18/01.

NWFusion offers more than 40 FREE technology-specific email newsletters in key network technology areas such as NSM, VPNs, Convergence, Security and more.
Click here to sign up!
New Event - WANs: Optimizing Your Network Now.
Hear from the experts about the innovations that are already starting to shake up the WAN world. Free Network World Technology Tour and Expo in Dallas, San Francisco, Washington DC, and New York.
Attend FREE
Your FREE Network World subscription will also include breaking news and information on wireless, storage, infrastructure, carriers and SPs, enterprise applications, videoconferencing, plus product reviews, technology insiders, management surveys and technology updates - GET IT NOW.