SVG with conversion of template and image to PNG Image not completed

Question

I am trying to hide svg generated by Raphael.js in a PNG image. Well, I converted SVG to image when svg doesn't have a template and image component. Then again, when I add these two components to the SVG, something goes wrong and the conversion fails. Full script here . Even if I save the generated svg and open in the browser without converting to an image, the image and patter will not be displayed.

Code snippet:

var r = Raphael(document.getElementById("cus"), 390, 253); r.setViewBox(-5, -2, 228, 306); for (var outline in doorMatOutline) { var path = r.path(doorMatOutline[outline].path); //path.attr({fill: 'url('+patternuri+')'}); //adding pattern } //adding image var img = r.image(imageuri, 5 ,10 ,100 ,100); var svg = $('#cus').html().replace(/>\s+/g, ">").replace(/\s+</g, "<"); canvg('cvs', svg, { ignoreMouse: true, ignoreAnimation: true }); var canvas = document.getElementById('cvs'); var img = canvas.toDataURL("image/png"); $("#resImg").attr('src', img); $("#cus").hide(); 

Answer 1

I solved it here http://jsfiddle.net/fktGL/1/ , first I had to change the svg attribute from

xmlns="http://www.w3.org/2000/svg"

to

 xmlns:xlink="http://www.w3.org/1999/xlink" 

since svg was not checked in the W3C validation service, but here it is stackoverflow explaining that a change is required.

Then I had to add a few timeouts to allow SVG to display correctly. I understand this because the image was drawn in SVG and canvas, but they need some time to render the image. My solution does not work perfectly on slow devices (increasing timeouts would help), but I don't know any other way around this (welcome any comments / improvements).

Here is the final snipit

 var r = Raphael(document.getElementById("cus"), 390, 253); r.setViewBox(-5, -2, 228, 306); for (var outline in doorMatOutline) { var path = r.path(doorMatOutline[outline].path); path.attr({ fill: 'url(' + patternuri + ')' }); } $('#cus svg').removeAttr('xmlns'); // If not IE if(/*@ cc_on!@ */false){ $('#cus svg').attr('xmlns:xlink',"http://www.w3.org/1999/xlink"); } // First timeout needed to render svg (I think) setTimeout(function(){ var svg = $('#cus').html(); window.svg = svg; canvg(document.getElementById('cvs'), svg); // annother delay required after canvg setTimeout(function(){ var canvas = document.getElementById('cvs'), img = canvas.toDataURL("image/png"); $("#resImg").attr('src', img); //$("#cus").hide(); console.log("ending... "); },100) },100);