Chapter 4: Batik

Overview

Scalable Vector Graphics (SVG) is a W3C Recommendation for encoding vector graphics drawing instructions as XML. You may wonder why SVG exists—after all, we’ve been using HTML and the <img> tag for a number of years and have gotten along fine. SVG provides some interesting capabilities that using images doesn’t. If your browser is SVG enabled, then all the drawing takes place in the browser. This is where the scalable part of SVG comes into play. You can send an SVG file to a device, and the device can scale and render it according to its own display characteristics—something that’s hard to do with images. Because the file sits in the browser, scaling, panning, and zooming can be performed by the SVG browser. This is possible with images, but the results are often ugly to look at. SVG images solve this problem.

SVG uses a vector drawing model, which can have advantages over a bitmapped model. In particular, doing something like drawing text along a curve or producing line-oriented drawings is easier with a vector model. The vector model allows the scaling mentioned in the last paragraph.

SVG drawings can be dynamic and interactive. This is a big change from bitmapped images. In practice, this means you can use drawings to provide a visually rich and interactive user interface. Dynamic SVG can do most of the things you’d do using a tool like Flash. The benefit of SVG is that it’s a standard being developed by the W3C, whereas Flash is a proprietary technology. Although it’s true that Macromedia has opened the Flash file format (SWF), there’s still a difference between an open file format controlled by a single company and a standardized language controlled by an international standards body. Advocates of Flash will point out that SWF files are binary and very small, which is a concern in the Web environment. However, SVG mandates the use of gzip compression on its files, which helps to reduce the size of SVG documents.

Support for SVG is limited but improving. Adobe provides an SVG Viewer plugin that works with all major Web browsers. (You can obtain this plugin at www.adobe.com/svg.) In addition, the open-source Mozilla browser plans to include built-in SVG support in a future release. As we’ll see in this chapter, Batik provides a stand-alone open-source SVG browser written in Java. On the authoring front, a number of commercial drawing packages support SVG, including Adobe Illustrator, Jasc WebDraw, and CorelDRAW. The Sodipodi program provides open-source drawing tools for creating SVG.

The Batik project at xml.apache.org started because several teams that were working on SVG wanted to pool their efforts. The initial set of contributors came from CSIRO, ILOG, Eastman Kodak, and Sun Microsystems. Here’s what the Batik site say about the origin of the name Batik:

Note

Batik is a highly evolved art tradition that developed in Java (one of the islands comprising what is now called Indonesia). Batik is generally thought of as the quintessentially Indonesian textile. Motifs of flowers, twining plants, leaves, buds, birds, butterflies, fish, insects and geometric forms are rich in symbolic association and variety; there are about three thousand recorded batik patterns.

We think Batik gracefully evokes Java, graphics, and high quality, terms that constitute the core of the toolkit.