Generating and Serving 2-D Molecular SVGs

Rich Apodaca — Sat, 09 Sep 2006 14:45:00 +0000

A previous article showed some examples of 2-D molecular rendering using Scalable Vector Graphics (SVG) embedded in a web page. This article will outline some simple steps for generating these images and publishing them on the Web.

Prerequisites

This tutorial uses Structure-CDK, a CDK add-on library written in Java. You'll need to install Sun's JDK 1.4.2 or later (or an open source alternative). Although not required, Ant makes it easy to use Structure-CDK. You'll want to make sure that your browser is SVG-enabled.

Creating a 2-D Molecular SVG File

Methylenedioxymethamphetamine (MDMA)

An SVG image like the one shown above can be created with this sequence of steps:

Download and unzip the current release of Structure-CDK.
Move into the unzipped Structure-CDK directory and run the Structure Visual Testing Framework:
```
$ cd structure-cdk-0.1.2
$ ant vis
```
From the File menu, choose Open... and use the file dialog to open a molfile. The molfiles directory contains some samples.
Resize the image to taste and choose Save as SVG... from the File menu. This writes the SVG image to a directory and filename of your choice.

Viewing the SVG File

You now have several options for viewing the SVG file. One of the simplest is to open it with the Firefox browser. Another option is to open it with the excellent, free SVG editor Inkscape. From Inkscape, you can edit your image, apply any number of special effects from the mundane to the remarkable, and save the result to disk.

Deploying the SVG File on the Web

After uploading your SVG file to a blog or other site, you may have some additional configuration to do. Because the SVG MIME type is not configured by default on all servers, you may need to do so yourself.

After uploading my first set of SVG files to my server, I tried to view them in Firefox. Instead of seeing the expected image in the browser window, I got a dialog asking if I wanted to open it with Inkscape or save it to disk.

With the help of some documentation, I was able to track the problem down to my server, which was using the MIME type "image/svg-xml" instead of "image/svg+xml". The former is the obsolete SVG MIME type, which Firefox rejects. Internet Explorer equipped with Adobe's SVG plugin, on the other hand, accepts the obsolete MIME type, rendering SVG without presenting a dialog. Web-Sniffer, which decodes header information from HTTP responses, may be useful for debugging your server's MIME type configuration.

Having configured your server's SVG MIME type as "image/svg+xml", pointing your browser to your SVG file's URL will let you view it in its full, W3C-compliant glory.

Embedding the SVG File in HTML

There are a few options for embedding an SVG image in HTML. The most universally-applicable mechanism is the <embed> tag:

<html>
  <head></head>
  <body>

  <!-- document body -->

  <embed src="url-to-svg-file.svg" TYPE="image/svg+xml" width="400" height="400" />

  </body>
</head>

Embedding SVG into HTML carries some limitations. For example, you can't interact with the SVG DOM the way you can if the SVG is inlined, or placed directly into the HTML document itself. But that's a subject for another time.

Creating and deploying 2-D molecular images as SVG documents is a straightforward process, provided that some details are taken care of. Future articles in this series will show how SVG's advanced features make it a compelling choice as a chemical informatics rendering platform.