Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to transform a Raphael paper result to PNG/SVG in any browser (including older IEs)?

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!

like image 359
Alejandro Rizzo Avatar asked Nov 14 '22 11:11

Alejandro Rizzo


1 Answers

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.

like image 123
swift Avatar answered Nov 16 '22 03:11

swift