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.

• Almost full support for the SVG specifications is provided by the Adobe V2.0 plugin combined with a conventional browser. A discrete SVG file must be created, and invoked by wrapping with (X)HTML code. The examples below were produced either directly, or from Chemical editing programs and pre-converted to SVG.
• The JUMBO-JS system dynamically converts a CML file to SVG rendering elements using JavaScript and is displayed in an XML-aware browser using the Adobe SVG plugin.
• Some experimental browsers such as Amaya and Croczilla can display XML documents containing several XML namespaces combined within a single document (e.g. XHTML, MathML, SVG) and rendered conjointly.
• The Croczilla browser is also capable of directly rendering a CML file by specifying for it a CML CSS stylesheet. This invokes an XBL binding specification to map CML elements to SVG elements for screen rendering. If you are viewing this with the Croczilla browser, try this CML document.
• Lates builds of Mozilla now support SVG directly.

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!:	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.