Phrogz solution worked beautifully.

I'm using Raphael SketchPad to create an SVG. Link to the files in step 1.

For a Save button (id of svg is "editor", id of canvas is "canvas"):

$("#editor_save").click(function() { // the canvg call that takes the svg xml and converts it to a canvas canvg('canvas', $("#editor").html()); // the canvas calls to output a png var canvas = document.getElementById("canvas"); var img = canvas.toDataURL("image/png"); // do what you want with the base64, write to screen, post to server, etc... }); 

jbeard4 solution worked beautifully.

I'm using Raphael SketchPad to create an SVG. Link to the files in step 1.

For a Save button (id of svg is "editor", id of canvas is "canvas"):

$("#editor_save").click(function() { // the canvg call that takes the svg xml and converts it to a canvas canvg('canvas', $("#editor").html()); // the canvas calls to output a png var canvas = document.getElementById("canvas"); var img = canvas.toDataURL("image/png"); // do what you want with the base64, write to screen, post to server, etc... });