I got following JS Code in an onClick Eventhandler, it draws an inline SVG to a Canvas and then exports as PNG:
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.canvas.width = size;
ctx.canvas.height = size;
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI, 'icon_'+icon+'.'+fileType.toLowerCase());
};
img.src = url;
This works fine in Chrome but returns blank in Firefox. One common error I found here at SO that i need to run the code in the onLoad Event on the img, but that doesn't seem to help here. Thanks in advance for any help!