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

Here is how you can do it through JavaScript:

1. Use the canvg JavaScript library to render the SVG image using Canvas: https://github.com/gabelerner/canvg
2. Capture a data URI encoded as a JPG (or PNG) from the Canvas, according to these instructions: Capture HTML Canvas as gif/jpg/png/pdf?

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 canvascanvg('canvas', $("#editor").html());// the canvas calls to output a pngvar canvas = document.getElementById("canvas");var img = canvas.toDataURL("image/png");// do what you want with the base64, write to screen, post to server, etc...});

This seems to work in most browsers:

function copyStylesInline(destinationNode, sourceNode) {   var containerElements = ["svg","g"];   for (var cd = 0; cd < destinationNode.childNodes.length; cd++) {       var child = destinationNode.childNodes[cd];       if (containerElements.indexOf(child.tagName) != -1) {            copyStylesInline(child, sourceNode.childNodes[cd]);            continue;       }       var style = sourceNode.childNodes[cd].currentStyle || window.getComputedStyle(sourceNode.childNodes[cd]);       if (style == "undefined" || style == null) continue;       for (var st = 0; st < style.length; st++){            child.style.setProperty(style[st], style.getPropertyValue(style[st]));       }   }}function triggerDownload (imgURI, fileName) {  var evt = new MouseEvent("click", {    view: window,    bubbles: false,    cancelable: true  });  var a = document.createElement("a");  a.setAttribute("download", fileName);  a.setAttribute("href", imgURI);  a.setAttribute("target", '_blank');  a.dispatchEvent(evt);}function downloadSvg(svg, fileName) {  var copy = svg.cloneNode(true);  copyStylesInline(copy, svg);  var canvas = document.createElement("canvas");  var bbox = svg.getBBox();  canvas.width = bbox.width;  canvas.height = bbox.height;  var ctx = canvas.getContext("2d");  ctx.clearRect(0, 0, bbox.width, bbox.height);  var data = (new XMLSerializer()).serializeToString(copy);  var DOMURL = window.URL || window.webkitURL || window;  var img = new Image();  var svgBlob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});  var url = DOMURL.createObjectURL(svgBlob);  img.onload = function () {    ctx.drawImage(img, 0, 0);    DOMURL.revokeObjectURL(url);    if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob)    {        var blob = canvas.msToBlob();                 navigator.msSaveOrOpenBlob(blob, fileName);    }     else {        var imgURI = canvas            .toDataURL("image/png")            .replace("image/png", "image/octet-stream");        triggerDownload(imgURI, fileName);    }    document.removeChild(canvas);  };  img.src = url;}