RaphaelJS to SVG to

Question

I'm trying to let user download SVG graphic as PNG. You may reach the code via JSFIDDLE

SVG to CANVAS part is not working.

Already added canvg and Mozillas's code neither of them working. Also added Canvas2Image which should works if canvas has element.

Answer 1

Thanks to gabelerner who developed canvg helped me to fix it

1. based on Problem saving as png a SVG generated by Raphael JS in a canvas, strip off all spaces between tags in svg
2. based on Problem saving as png a SVG generated by Raphael JS in a canvas image's href changed as xlink:href
3. based on gabelerner, added xmlns:xlink="http://www.w3.org/1999/xlink" into svg xlmns
4. based on gabelerner, image must be under the same domain - no crossside
5. based on gabelerner, Canvas2Image can't work within frame which means no FIDDLE (thus I deleted FIDDLE part to make it clear)

Here is the sample SVG and JS part you may want to have

var svg_XML_NoSpace = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1024" height="768"><desc>Created with Raphaël</desc><defs></defs><image x="0" y="0" width="1024" height="768" preserveaspectratio="none" xlink:href="http://<mydomain>/<myfolder>/<myfile>"></image><path fill="none" stroke="#ff0000" d="M414,114L722,114" style="stroke-width: 3px;" stroke-width="3"></path></svg>'; //based on gabelerner

//add canvas into body        
var canvasID = "myCanvas";
var canvas = document.createElement('canvas');
canvas.id = canvasID;
document.body.appendChild(canvas);

//convert svg to canvas
canvg(document.getElementById(canvasID), svg_XML_NoSpace, { 
    ignoreMouse: true, ignoreAnimation: true, 
    renderCallback: function () {
         //save canvas as image
         Canvas2Image.saveAsPNG(document.getElementById(canvasID));  
         }
} );