Convert Raphael SVG to image (png etc) client side

javascript svg raphael
mitch picture mitch · Nov 3, 2010 · Viewed 19.2k times · Source

Possible Duplicate:
Convert SVG to image (JPEG, PNG, etc.) in the browser

I have a small project where users construct a diagram using Raphael and then export the composed diagram to an image to save.

Problem is it has to run offline. http://www.nihilogic.dk/labs/canvas2image/ will not work as it requires a canvas, not the Raphael generated SVG.

Is there a way (javascript) that I can export an image from the SVG?

Answer

mitch picture mitch · Nov 4, 2010

Yes, that duplicate question was a big help. canvg combined with canvas2image sorted me out.

So I created the SVG using Raphael. Then on a button click, saved the inner HTML of the div holding the SVG in a variable, then used that in canvg, hiding the SVG div. I could then use the ID of the canvas for canvas2image. It only really worked well for PNG.

Related questions

How to access SVG elements with Javascript

I'm messing around with SVG and I was hoping I could create SVG files in Illustrator and access elements with Javascript. Here's the SVG file Illustrator kicks out (It also seems to add a load of junk to the beginning …

Read More
jQuery SVG vs. Raphael

I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know What the trade-offs are between the two Where the development momentum seems to be. I …

Read More
how to change svg text tag using javascript innerHTML

i was using raphaeljs , and i want to show html(not only text) in svg, so i use this code : var r = Raphael("holder", 200, 300); var t = r.text(10, 10, "ssdwqdwq"); t.node.innerHTML='dddd' but i cant change the svg's content , …

Read More