GuidesHypewatch: SVG Love

Hypewatch: SVG Love

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

When it comes to creating applications — especially snazzy multimedia apps — people often weigh the benefits of Java versus Macromedia Flash. While the two can’t really be compared — Java is a fully functional language and Flash is a specialized tool that strings together vector graphics and a little JavaScript — they both have alluring pros and frightening cons.

David Fox

Java pros: You can pretty much write anything, given the memory and processor limitations of your machine.

Java cons: The applets can get mighty large, fancy animations can get slow, and you may have to create huge graphical libraries, and do all the math and image manipulation pretty much by hand.

Flash pros: If you want to bend, scale, and alpha channel a simple logo or text, nothing could be simpler. Once you’re familiar with Flash, creating impressive animations is a few mouse clicks away.

Flash cons: You have to tie everything together using Actionscript — an unwieldy bastard son of JavaScript. If you want to create something more than a simple interactive button, you’re going to have hours of heartache and pain ahead.

Flash’s big focus is on vector graphics. Vector graphics are a way of expressing images mathematically, from the ground up, using the lines, points, shapes, and other fills that make them up. It’s like saving the instructions for how to draw a picture rather than the picture itself. This lets programs such as Flash do some fancy tricks. Vectors can be scaled up or down infinitely, rotated, scaled, stretched, made transparent, tinted, etc. A Flash file looks exactly the same whether running on a huge monitor or a diminutive iPaq handheld.

Batik may wind up being one of the saviors of client-side Java — helping to change Java’s image from a slow, puffy, and drab applet into a spiffy, rich, and zoomin’ multimedia platform.

Compare vector graphics to raster graphics, such as our friends the GIF or JPG, also known as bitmaps. Bitmaps are precise grids of colored pixels forming exact images. Bitmaps are great for expressing complicated graphics such as photographs. But if you try to scale or stretch a raster graphic beyond its current resolution it will begin to look blurry and warped.

Flash works its magic by taking a raster image description, animating or modifying some of the values, and then rasterizing it on the screen, frame by frame.

Noticing the appeal of Flash and other vector graphics tools, many people have begun to embrace a more open format called Scalable Vector Graphics, or SVG. SVG is a language to describe two-dimensional vector graphics — and how they interact with text and standard raster graphics — in XML. It handles pretty much everything that Flash does, such as gradients, grouping, transformation animation, masking, clipping paths, filter effects, and alpha channel transparency. The World Wide Web Consortium — the folks who keep track of all the Web standards — maintains a nice set of specs on SVG.

SVG also supports event handlers such as OnMouseOver and OnClick, so that mouse, keyboard, or timed events can kick off interactive scripts. Every graphical object in SVG can be dynamically accessed through these scripts, and any of the object’s properties can easily be tweaked.

There are already many tools that allow you to author SVG images. For example, Adobe Illustrator 9.0 has the ability to export images in the SVG format.

Now wouldn’t it be nice if an open standard like SVG could be tied to an open language such as Java?

Guess what — the Apache foundation has created an open source Java toolkit for SVG. The project is known as Batik, named after an Indonesian textile process. Batik consists of several different components that allow your Java programs to read SVG files in, export and import SVG files to and from other graphic formats, manipulate SVG images, create SVG images on-the-fly, render and animate SVG graphics, and access various objects within the SVG tree.

Some of Batik’s modules are extensions to existing Java APIs. For example, there is an addition to the Java 2D classes that adds more sophisticated fill types and filter effects.

To help get you started using Batik, you can visit the Apache Web site and find the full code to accomplish pretty much any SVG task. For example, the SVG Browser lets you load up an SVG image and zoom it, pan it, rotate it, or view a tree of graphical objects. The heart of the browser is the org.apache.batik.swing.JSVGCanvas component, which you can easily drop into any application you write.

Batik isn’t perfect — it’s got its share of bugs, some SVG details are not implemented yet, and dynamic SVG scripting support still isn’t included. And unlike Flash, which over 80 percent of the Web-surfing public has installed, Batik libraries need to be downloaded and installed.

But it’s not difficult to imagine a near-future where Batik and SVG are used to create and display full Flash-like animations, games, and menus. In fact, Batik may wind up being one of the saviors of client-side Java — helping to change Java’s image from a slow, puffy, and drab applet into a spiffy, rich, and zoomin’ multimedia platform.

About the Author

David Fox is the author of numerous books and articles about cyberculture and technology.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories