Chemical Rendering using SVG (Scalable Vector Graphics) and CML (Chemical Markup Language)

These are examples of how chemical objects expressed in XML languages such as CML (Chemical Markup Language) or SVG (Scalable Vector Graphics) can be rendered. The examples include transformations/bindings between CML and SVG.

Examples of SVG invoked using an <img> XHTML Element
A Simple Chemical reaction Scheme
A More Complex Structural diagram
This should show the CML logo in animated fashion!:
CML boiling!
A benzpyrene analogue with calculated charges (best viewed in IE5 - Netscape renders very slowly) [separate window]. Red circles are positive, blue negative, and the radiuse reflects the charge. All properties are rendered via the SVG DOM, which also works out the bonding.
Another benzpyrene analogue Caffeine and its spectra. [NW: infrared, SW: mass spectrum; SE: UV]. In IE5/6 you can run the mouse over the mas spectrum and it should announce the peak heights and positions in the top right panel. Unfortunately most interactive behaviour is still browser-dependent.
A Phase diagram for Sulfur A lecture slide, containing embedded raster images
The JUMBO-JS Method, which dynamically converts a CML file to SVG rendering primitives using JavaScript. You will need an XML-aware browser such as Internet Explorer (V6) to display this page.

How these SVG Files were produced

  1. They can be "hand authored" using a text editor
  2. The first two examples above were originally drawn in the chemical editors ChemDraw and Chem3D, saved as EPS files (make sure you include Laser Prep in the options settings), read into Adobe Illustrator 8/0/9.0 and finally exported as SVG (text or compressed). The resulting diagrams are essentially identical to the original artwork. For a nice non chemical example see the WWW Road map by Tim Berners-Lee
  3. Mayura is a free Windows-based program that exports SVG
  4. CorelDraw10 both imports and exports SVG.
  5. Batik from Apache is an excellent SVG viewer with many options
  6. Celinea produce a program called CR2V for converting raster images to SVG.
  7. An alternative, Linux raster converter is AutoTrace.
  8. Any SVG file can be compressed using the gzip compressor. The .svg.gz file can be renamed back to .svg, and the compression ratio obtained is often 10:1 or better.
  9. SVG can be produced directly from XML marked up data, using stylesheets (XSLT or CSS) or computed dynamically from XML using JavaScript.
  10. SVG can be "bound" to an XML document using XBL (XML Binding Language) invoked via a stylesheet. If you are viewing this with the Croczilla browser, try this CML document as an example.

A comment on SVG vs Bitmap Image formats

  1. SVG can be scaled, and is also particularly suitable for printing. Note the anti-aliasing that can be applied to the vectors.
  2. As with GIF images, SVG files can be displayed progressively, ie you do not have to wait for all the file to be downloaded to view the first components.
  3. SVG files can be held as text (hence suitable for editing) or in compressed form (reducing download times).
  4. Because SVG is expressed as XML, it can also be searched. For example, using the plugin window below, press your control key and from the menu that appears, invoke "find" and find the string "Easter".
  5. By implication, SVG files can be indexed.
  6. Being XML, stylesheets can be applied to SVG files. Such stylesheets can achieve impressive transformations. The reverse is also true, i.e. SVG can be produced by stylesheet transforms from other XML documents.
  7. Being XML, SVG files are modular, and hence can be part of a larger XML document. Amaya is particular good at illustrating how eg SVG, MathML, XHTML etc can be combined into a single document using namespaces.
  8. SVG is NOT a 3D format, and so is NOT equivalent to e.g. VRML.

Henry S. Rzepa and Peter Murray-Rust, first created 20/02/00; last updated 29/11/04.