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
- 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
- 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
- Lates builds of Mozilla now support SVG directly.
|Examples of SVG invoked using an <img> XHTML
|A Simple Chemical reaction
|A More Complex Structural diagram
|This should show the CML logo in animated fashion!:
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
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
Method, which dynamically converts a CML file to SVG rendering
as Internet Explorer (V6) to display this page.
How these SVG Files were produced
- They can be "hand authored" using a text editor
- 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
- Mayura is a free Windows-based program
that exports SVG
both imports and exports SVG.
- Batik from Apache is
an excellent SVG viewer with many options
- Celinea produce a program called
CR2V for converting raster images to SVG.
- An alternative, Linux raster converter is AutoTrace.
- 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.
- SVG can be produced directly from XML marked up data, using
stylesheets (XSLT or CSS) or computed dynamically from XML using
- 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
- SVG can be scaled, and is also particularly suitable for printing.
Note the anti-aliasing that can be applied to the vectors.
- 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
- SVG files can be held as text (hence suitable for editing) or in
compressed form (reducing download times).
- 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".
- By implication, SVG files can be indexed.
- 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
- 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.
- 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