Pages

▼

Sunday, June 12, 2011

CDK-JChemPaint #7: rendering molecules as SVG

A very long time ago, Scalable Vector Graphics promised to revolutionalize images on the web. After initial cool work (including CMLSnap: animated chemical reactions by Peter's group!), things cooled down. There was simply a lack of support in browsers. Things have changed. SVG is much better supported now, and people are starting to use SVG again. Like Noel, visualizing 100 molecules in one blog post.

The new CDK-JChemPaint code has been refactored such that the original code for the core functionality is now independent from the drawing toolkit. And we have two well-developed implementations, one for Swing/AWT (used by the JChemPaint applet), and one for SWT (used by Bioclipse). And there is one that generates SVG too, written by Gileain as a proof of principle.

The code is almost identical to the code for rendering molecules as PNG. We just swap the AWTDrawVisitor for the SVGGenerator:

-renderer.paint(triazole, new AWTDrawVisitor(g2));
+svgGenerator = new SVGGenerator();
+renderer.paint(triazole, svgGenerator);

Additionally, we need to change how we output the results. The below code generate the SVG and the matching HTML snippet:

new File("triazole.svg").append(svgGenerator.getResult())

file = new PrintWriter(new FileWriter(new File("triazole.html")))
file.println("<html>");
file.println("<body>");
file.print("<embed width=\"100\" height=\"100\" src=\"triazole.svg\" />");
file.println("</body>");
file.println("<html>");
file.close()

The result looks like:



I did have to tweak the SVG generated with CDK-JChemPaint 20, so that the HTML ensures the initial scaling, by removing the width and height in the SVG (patch pending). But this output also nicely shows that there are glitches in the generated code. I hope people are interested in contributing to this part of the CDK-JChemPaint patch!

The full source code of the svgMol.groovy can be found in the Groovy JChemPaint repository.
at

4 comments:

  1. Henry Rzepa5:22 PM, June 12, 2011

    By the way, invoking SVG via the IMAGE element is also supported by most up to date browsers. I also find it useful to add additionally namespaced elements, such as for example an anchor, so that the SVG can itself be linked to eg the calculation it may be derived from. I used lots of SVG in the article written to celebrate Peter Murray-Rust's celabration in January, and this article, complete with active SVG graphics will indeed shortly appear in the J. Cheminformatics (who have cooperated fully in preserving the SVG and much else active stuff in the onlineversion).

    ReplyDelete
  2. Henry Rzepa5:29 PM, June 12, 2011

    Forgot to mention that I use SVG in my blog where it sits very nicely. Other components so inserted include ChemDoodle and Chemicalize (from ChemAxon). The ChemDoodle, if used with a HTML/WebGL aware browser (Chrome, Safari webkit, etc) can render 3D molecules very nicely (an alternative to eg Jmol).

    ReplyDelete
  3. Egon Willighagen7:09 PM, June 12, 2011

    Sounds really great! I am very much looking forward to that issue, and your SVG paper in particular. Please do blog about it, so that we can encourage others to start using SVG too, as much as possible. (I will need to check how to get R to spit SVG, but I'd be surprised if people have not been doing that already :)

    We need to make sure, that SVG experience ends up in the author guidelines of the various BMC journals, and not just JChemInf!

    ReplyDelete
  4. Henry Rzepa12:41 PM, June 13, 2011

    You can get a sample of my use of SVG via this link. Click on the (resizable) thumbnail to get a large image, and click on that image to go to the digital repository from whence it was derived.

    ReplyDelete