Search /
Docfinder:
Advanced search  |  Help  |  Site map
RESEARCH CENTERS
SITE RESOURCES
Click for Layer 8! No, really, click NOW!
Networking for Small Business
TODAY'S NEWS
While Heartbleed distracts, hackers hit US universities
How Apple's billion dollar sapphire bet will pay off
US to vote on sharp increase in broadband subsidies
iPhone 6 rumor rollup for the week ending April 18
NSA spying revelations have tired out China's Huawei
Arista co-founder may have switch maker by its jewels
Apple kicks off public OS X beta testing
Open source pitfalls – and how to avoid them
AT&T's expanded 1 Gbps fiber rollout could go head to head with Google
BlackBerry Releases BES 10 Security Update to Address 'Heartbleed' Flaw
Verizon: Web apps are the security punching bag of the Internet
Cisco announces security service linked with new operations centers
Dell launches virtual storage accelerator, aims to boost SAN performance
Free OS X Mavericks now powers half of all Macs
Even the most secure cloud storage may not be so secure, study finds  
3D printing will transform these five industries
Most but not all sites have fixed Heartbleed flaw
NEC launches face-recognition protection for PCs
Hundreds of medical professionals targeted in multi-state tax scam
Super-high frequencies could one day deliver your mobile video
Americans cool with lab-grown organs, but not designer babies
IT Departments Not Losing Ground to Managed Service Providers (Yet)
Where's my gigabit Internet, anyway?
IE6: Retired but not dead yet
Enterprise who? Google says little about Apps, business cloud services in Q1 report
/

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="http://www.gibbs.com/jsanim.svg">

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 = document.my doc.getSVGDocument();
svgtext = svgdocument.getElement ById('ghtext');
svgtext.setattribute('style','fill:red');

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 gearhead@gibbs.com.

RELATED LINKS

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.