Comments on: Export SVG from Raphael JS to create a PNG bitmap

By: L. Garcia

L. Garcia — Wed, 30 Mar 2011 15:36:20 +0000

Hello there,

I am trying the serialization plugin at https://github.com/jspies/raphael.serialize. This is probably a naïve question… I noted you use $.each, is that JQuery or Prototype? How can I get that functionality in pure Javascript?

Thanks

By: Gokool

Gokool — Sat, 19 Mar 2011 16:38:49 +0000

I found a way to do it client side. I have tested it only with chrome, and ff so far though http://stackoverflow.com/questions/4086703/convert-raphael-svg-to-image-png-etc-client-side

By: Jonathan Spies

Jonathan Spies — Fri, 09 Jul 2010 17:16:33 +0000

I don’t really need the server side. What I’m doing is allowing a user to draw, save that drawing, and pull it up again for editing. At the top of that gist I added a loadJSON function that builds a Raphael set out of the saved JSON.

They remain objects and I return the set so I can throw some event handlers onto them to allow them to be selectable and editable.
It’s all client site except for an Ajax call to save/load the json to/from the database.

By: Ben Barnett

Ben Barnett — Fri, 09 Jul 2010 17:14:52 +0000

Thanks for emailing to let me know that there was an issue with posting comments. Having some troubles with spam so hopefully it’ll all be sorted now.

I ran into a few issues re-building the SVG ‘path’ attribute as Raphael seems to store it’s arrays slightly differently (hence the lengthy loop for that case). However having run a few tests on some more involved drawings your JS has really helped. Thanks for that – also like the way you’ve cleaned up the return path as well, neatness is good.

Did you need the server side element to this? Just wondering if you managed to adapt that side of things too.

By: Jonathan Spies

Jonathan Spies — Fri, 09 Jul 2010 17:14:25 +0000

Great post. Thanks a lot. I needed to serialize the SVG object for a different reason, but your gist really put me in the right direction. I noticed looping through the paper object didn’t give me all the SVG objects. Did you run into this? I found they were stored in a linked list starting at the top and bottom methods for the paper object. I put a modified gist up that also has support for some more basic shapes (rect, ellipse, and text).

By: Ben Barnett

Ben Barnett — Fri, 09 Jul 2010 17:13:18 +0000

Rob I think you might be on to something there. I agree, any way to avoid having to repeat all of Raphael’s hard work in PHP would be a bonus as it’s obviously faster and also makes the technique future proof with future releases.
The only server side code we will still need though is the hook into Apache Batik or one of the other SVG rasterizers. One to actually execute it and probably a bit more logic to actually do something with the resulting PNG, even if it’s just outputting a URL to it. The rest could be handled client side as you say.
Definitely something I’ll be looking into.

By: Steven Phillips

Steven Phillips — Fri, 09 Jul 2010 17:12:50 +0000

Great post dude, that has helped me out big time

By: Rob Crowther

Rob Crowther — Fri, 09 Jul 2010 17:12:22 +0000

This is excellent work, I’m going to have to think of a project to try it out. The only thing I’m thinking is, do you really need to use PHP on the server side to generate the SVG from the object on IE when you already have a load of code in Raphael to do that for you? If you could force R.svg to be true somehow would it then be possible to ‘trick’ Raphael to output the SVG for you directly?
I’ve looked at the code and it probably isn’t a simple thing to do, but it’s probably going to be simpler than recreating all that Raphael functionality in PHP?