Create JPEGs Automatically With SVG
By Benoit Marchal
2003-12-22
Reader Rating: 
Use Scalable Vector Graphics To Create Images By The Dozen
In this tip, Benoit Marchal discusses a pragmatic approach to Scalable Vector Graphics (SVG). Until the SVG viewer becomes as ubiquitous as the Macromedia Flash player, it will be difficult to incorporate SVG images directly into a Web site. In the meantime, Web developers benefit from generating JPEGs and other bitmaps through SVG. SVG is especially helpful because it is pure XML.
Scalable Vector Graphics (SVG) is an image format developed by the W3C. Since it is based on XML, you can generate images through stylesheets and other XML scripts. This makes SVG a valuable addition to a Web developer and webmaster toolkit. In this tip, I'll show you how to use SVG to generate images automatically, such as from statistical data.
Just what is SVG?SVG is an XML vocabulary for describing vector images. The two types of images are: bitmap and vector. A bitmap (JPEG, GIF, or PNG file) is a grid of pixels that represents an image. A vector image (SVG or Macromedia Flash) describes the image in terms of basic shapes such as circle, rectangle, lines, or curves. Adobe Photoshop is an editor for bitmaps, while Adobe Illustrator is an editor for vector images.
Headless Gaphics
Batik requires Graphics2D, the standard Java API for 2D graphics, to generate the images. This may be a problem with UNIX or Linux Web servers because Graphics2D needs an X11 server, which seldom runs on Web servers. Since JDK 1.4, you can run a so-called
Headless Application
by setting the java.awt.headless property to true. Note that the JDK still links to the X11 library, but the server doesn't need to be started. You can set the property directly on the command line:
java -Djava.awt.headless=true
-jar batik-rasterizer.jar chart.svg
|
|
Bitmaps tend to be larger files and are more difficult to resize without losing quality. Imagine an image with a circle 50 pixels in diameter. The corresponding bitmap must be at least 50 x 50 pixels in size, or 2,500 individual pixels. If the circle had a diameter of 100 pixels, the bitmap would be 100 x 100 pixels in size, making it four times as large (10,000 individual pixels). JPEG, GIF, and PNG files are compressed to reduce file size. While compression helps to a certain extent, bitmaps still tend to be larger than vector images.
Indeed, the corresponding vector image has only one instruction: "Draw a circle of 50 pixels." Furthermore, the larger circle does not require a significantly larger file (it becomes "draw a circle of 100 pixels"). Unfortunately, not every image can be decomposed in basic shapes -- for example, it does not work with photos. So bitmaps play a useful role, but for those images that can be decomposed into basic shapes such as diagrams, logos, and chemical formulas, a vector file format is inherently more efficient.
Making a bitmap bigger or smaller results in loss of image quality. Indeed, when you double the dimensions of the pixel grid, you have four times as many pixels so you need to extrapolate almost three quarters of the image! Conversely, to double a vector image, you simply draw larger shapes.
Today, the most popular vector format on the Web is Macromedia Flash -- a great format supported by several vendors, but it is also a proprietary tool. SVG is a new standard, developed by the W3C, as an alternative to Flash.
The Web design community has much discussed the wisdom (or lack thereof) of using SVG instead of Flash. The main concern is that while Flash is available to 97 percent of PC users, SVG is not yet as widespread. Things may change and, since SVG is a standard, you should expect that browsers will eventually support it, but it may take years before it is as ubiquitous as Flash.
First published by IBM developerWorks
If you found this article interesting, you may want to read these as well:
» Better SOAP Interfaces With Header Elements
» Variable Substitution In XML Documents
» Grab Headlines From A Remote RSS File
» Tip: Convert from HTML to XML with HTML Tidy
|
