Rendering Molecules with SVG on the Web

Rich Apodaca — Thu, 07 Sep 2006 13:56:00 +0000

Scalable Vector Graphics (SVG) is an XML-based language for encoding graphical content. Unlike raster image formats such as PNG, JPEG, and GIF, SVG images can be scaled to any resolution without pixelation. Given that 2-D structure diagrams are essentially line drawings, SVG seems like a natural fit for this type of representation. SVG also boasts several advanced features that make it an especially intriguing choice.

In this first article of a series on SVG and chemical informatics, I'll start by showing some embedded SVG images of molecules (also see this demo). Later articles will discuss technical details such as writing, reading, animating, scripting, editing, annotating, and distributing 2-D structures encoded as SVG.

Now, the Bad News

SVG is a work in progress. Browser support and performance can vary widely. If you are using Firefox version 1.5 or better, you should be able to see all of the images in this article without doing anything.

Unfortunately for Internet Explorer users, Microsoft's browser lacks built-in SVG support. Still worse, IE 7 appears ready to continue this perplexing tradition. Fortunately, Adobe offers an SVG plugin for IE.

Although this page was tested in both IE 6 (with Adobe's plugin) and Firefox 1.5 (both Windows and Linux), your particular configuration may vary. Please feel free to post your experiences.

Some Simple SVG Structures

The examples below illustrate how SVG images of molecules can be embedded in an HTML document. These images just scratch the surface of what is possible. If you don't see 2-D structures, your browser may lack SVG support.

Ascorbic Acid

Alprazolam

Furosemide

DDT

Note: if your're viewing this article in a feed aggregator, the SVG images may have been stripped out. If so, please see the original article.

Depth-First: Rendering Molecules with SVG on the Web

Rendering Molecules with SVG on the Web

Now, the Bad News

Some Simple SVG Structures