This new file format may make it easier and faster for researchers working with Web images.

Webpages are wonderful things, at least until you get to graphics files. Most of us have probably spent hours or days waiting for even simple graphics to be downloaded so we can see a webpage. The graphics bottleneck is about to be broken with a new graphics file format, scalable vector graphics (SVG). The new format may have a far-reaching impact on the Web and on the display of scientific images.

Two different file formats encoding the water image above.

In a traditional graphics file, a BACK button image is created by specifying the color and brightness of each pixel of the image, which means that a very large amount of information is associated with just this one word. Well-known graphics formats such as JPEG and GIF compress the image data, but the files remain large. In a text file, BACK is represented by the ASCII code for each character—the computer interprets the code to show the word on the user’s monitor. Although ASCII is an efficient way to display information, it can’t be used to create eye-catching Web images such as a BACK button with a rainbow background and polka-dot letters.

Hypertext markup language (HTML), the language that webpages are written in, allows more formatting than simple ASCII text. Text can be made bold, centered, left-justified, and formatted other ways to make the text more readable. To make these formatting changes, HTML programmers make the files slightly larger by adding hidden text instructions that tell Web browsers how to display the text. Using HTML allows more creative display of the BACK button than ASCII code, but it still can’t be used to create a rainbow background and polka-dot letters.

Enter SVG
Scalable vector graphics are images that computers can display from a set of geometric instructions instead of using information on each and every pixel, as traditional image files do. Put simply, SVGs are built on a collection of lines described as a set of endpoints. They are a mathematical and logical description of the structures that make up the image.

This vector-based, rather than pixel-based, representation of an image produces several advantages, including fast download, small file size, scalability, ease of development and editing, text searching of graphics, and compatibility.

Speed. The main motivator for SVG’s development is speed of download, which is directly related to file size.

Because SVGs are logical descriptions of lines—sets of numbers—they can fly through tight bandwidth connections that typically choke on bulky image files. SVG files are in text format, so they are smaller and more compressible than comparable JPEG or GIF images.

Scalability. Scalability is an important feature of SVG. The ability to change the size of an image or to focus on a portion of an image without degradation or loss of detail is a fundamental element of SVG. Changing the size of an image makes SVG potentially attractive to Web authors tailoring their pages to fit a variety of different Web-surfing devices such as cell phones and personal digital assistants. The same graphic can appear correctly on any display without the need to make new images to fit different dimensions.

Focusing on a portion of an image (zooming in) is an automatic part of SVG implementation. Zooming in on an SVG-enabled map, for example, is fast and can provide additional details such as street names, building addresses, and topographic information. Manipulation of molecular models, such as visualization, rotation, and analysis, can be performed in the client browser, independent of the display device being used. In addition, a researcher might include annotations (such as names or functions) on molecular models, which are unobtrusive during manipulation but visible when users zoom in.

Ease of development and editing. Another goal of SVG technology is to integrate graphics more tightly with documents on the Web. Because it is based on eXtensible Markup Language (XML) (see Today’s Chemist at Work, March 2000, p 17; May 2000, p 15), an SVG image can be included alongside data and text and manipulated by XML authoring tools.

Text searching of graphics. The text is not part of a graphic, so it is searchable. This means that a collection of SVG images can be searched for text strings such as labels, tables, names, titles, and more, just like any other text document. Although SVG can be used to create graphics-based text, the designer can include text strings as part of the SVG image, which allows the user to search for specific information.

Compatibility. Microsoft’s Internet Explorer has had support for its own predecessor to SVG, vector markup language (VML), but it hasn’t really achieved widespread deployment on websites. Now that SVG is the standard, analysts expect Microsoft to drop VML and embrace SVG. In fact, Internet Explorer can process both VML and SVG by using the appropriate plug-ins available at the Adobe website (www.adobe.com/svg/viewer/install/beta.html). Another nice feature of SVG is that the plug-in also works with Netscape, enabling the two most popular browsers to render SVG images.

Animation. SVG is compatible with Java, JavaScript, and most other scripting tools. SVG images can be animated and made interactive, but cost less to produce than Macromedia Flash images. In addition, the data for an SVG-based molecular model can be shared across applications, displayed on different devices, incorporated in reports, or sent to a printer with no structural modifications.

The World Wide Web Consortium, in addition to developing the SVG file format, put forth a recommendation (not officially a standard) for synchronized multimedia integration language (SMIL, pronounced “smile”). SMIL is an addition to SVG that allows animation of vector graphics. SMIL enables Web developers to sync sound, text, and other multimedia elements by using simple tags rather than complex Java programs.

SVG can generate any two-dimensional image, so it is great for molecular representations. It can also handle motion, transformations, shading, and shadows, providing a foundation for three-dimensional imaging. A molecule represented in SVG can be made to rotate with minimal programming and can be scaled, labeled, and searched.

The SVG graphic produced from an instrument or by a designer can be more valuable than a conventional image of the same subject. A protein model made using SVG might work equally well with software from the genetics, synthesis, or polymer fields of study. For example, a chemical company might design an interesting molecule using a standard molecular modeling package. The chemistry SVG information could be exported directly into a synthesis package to design the steps needed to build the molecule. Currently, such a model might have to be translated, imported, or even redrawn to transfer the data from one application to another. SVG simplifies sharing two-dimensional graphics data.

In the end, SVG can bring graphics, especially scientific graphics, into the 21st century, allowing them to be searched, animated, and interacted with in a platform-independent manner.

Hank Simon has worked with artificial intelligence and knowledge discovery systems for 22 years. Send your comments or questions regarding this article to tcaw@acs.org or the Editorial Office, 1155 16th St N.W., Washington, DC 20036.