5

I've seen a lot of people fighting with this matter, but I can't find a proper solution, nor one that fit my needs.

I'm doing some charts with Raphael, and I basically need to get them as PNG (for export, or later use in a PDF, and some other stuff). For Firefox, Chrome, IE 9, and any other browser with SVG support is easy. There are actually two ways to achieve it: using canvg to render the SVG into a canvas element and then obtain the image data; or sending the SVG to the server (C#) and using a library to rasterize it.

The problem is, of course, IE 8 and 7. In these browsers, Raphael outputs VML, and there is no way apparently of getting the SVG source. I couldn't find any VML rasterizer, so it lets me one only solution: to translate the VML to SVG, or to redraw the paper in SVG.

I checked the vectorconvert library por PHP, that actually uses XSLT transformations to translate VML to SVG, but I couldn't make it work (I've tried several tools to test the XSL but neither seem to work).

I tried to force Raphael to output SVG to a hidden div, by changing its properties .type, .svg, and .vml properly, but that didn't work either.

I think there might be a way to write the SVG tree into a hidden DIV while in IE; despite the fact it won't be shown by the browser, the text should be there.

Does anyone knows a way to achieve it? Thanks!

Alejandro Rizzo
  • 837
  • 2
  • 8
  • 14
  • The problem is trying to support those old browsers, tell those guys in a friendly way: "Your browser is outdated, please update it to use this page. Click here to Download Internet Explorer 9" – Ivan Castellanos Jan 13 '12 at 23:03
  • I'm not exactly sure how it fits into a solution, but would something like this help?: https://github.com/jspies/raphael.serialize It may at least allow you to get a consistent view of what's on the paper, and make the image elsewhere. – oli Jan 15 '12 at 01:55
  • Also look at: http://blog.davidpadbury.com/2010/10/03/using-nodejs-to-render-js-charts-on-server/ a combination of the two could achieve this. – oli Jan 15 '12 at 02:07
  • I checked raphael.serialize but I should still found something else. The nodeJS solution could be useful, but I'd like to find a more elegant solution for my scenario (C# + Javascript). Also, I've checked other two libraries that would help: [Raphael.JSON](https://github.com/ElbertF/Raphael.JSON) and [Raphael.Export](https://github.com/ElbertF/Raphael.Export); the last one seems to do the exact thing I'm looking for, but it's half implemented. It looks very promising though, but until it's complete, is useless to me. Thx! – Alejandro Rizzo Jan 16 '12 at 11:37

1 Answers1

1

To render SVG you can also use CanVG library.
It is SVG parser and renderer with canvas resulting output.
Next you can simply output pixel data from canvas to PNG.

To resolve IE limits you can use Chrome Frame.

swift
  • 270
  • 2
  • 5