svg to png

by Dale Howard

HTML

<body>
<div id="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" id="svg2" viewBox="0 0 258.744 289.063" width="73.023mm" height="81.58mm" version="1.1" xmlns:NS1="" NS1:xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:NS2="" NS2:xmlns:cc="http://creativecommons.org/ns#" xmlns:NS3="" NS3:xmlns:dc="http://purl.org/dc/elements/1.1/"><g id="layer1" transform="translate(-540.73 -1075.5)"><path id="outline" style="stroke-opacity: 0;" d="m 747.48 1350.8 c -63.479 0.1471 -71.933 0.1427 -146.25 -0.1382 l -60 -0.2271 l 0.12171 -128.75 l 0.1217 -128.75 l 45 -0.039 c 24.75 -0.021 63 -0.022 85 0 c 22 0 59.7 0.1 83.8 0.1612 l 43.75 0.1233 l -0.12171 128.75 l -0.1217 128.75 l -51.25 0.1187 Z m 31.294 -46.391 l -17.5 -0.016 l -0.002 1.875 l -0.002 1.8749 h -2.5 h -2.5 l 0.006 -6.2499 l 0.006 -6.25 h 2.5 h 2.5 l -0.002 1.875 l -0.002 1.9 l 17.5 0 l 17.5 0 l 0.0225 -23.75 l 0.0225 -23.75 l -17.5 -0.016 l -17.5 -0.016 l -0.0195 20.625 l -0.0195 20.625 h -2.5 h -2.5 l 0.008 -8.75 l 0.008 -8.75 h -5.625 l -5.625 -0.01 l 0.002 -2.5001 l 0.002 -2.4999 l 5.6 0.01 h 5.625 l 0.009 -9.375 l 0.009 -9.375 l -8.75 -0.01 l -8.75 -0.01 l -0.009 9.375 l -0.009 9.4 l 1.9 0 l 1.9 0.01 l -0.002 2.4999 l -0.002 2.5001 l -14.375 -0.014 l -14.375 -0.014 l 0.006 -6.2501 l 0.006 -6.25 h 2.5 h 2.5 l -0.004 3.7499 l -0.004 3.8 l 7.5 0 l 7.5 0 l 0.009 -9.3751 l 0.009 -9.3749 l -7.5 -0.01 l -7.5 -0.01 l -0.004 4.375 l -0.004 4.375 h -2.5 h -2.5 l 0.0101 -10.625 l 0.0101 -10.625 h 2.5 h 2.5 l -0.004 3.7501 l -0.004 3.7 l 7.5 0 l 7.5 0 l 0.009 -9.3749 l 0.009 -9.3751 l -7.5 -0.01 l -7.5 -0.01 l -0.004 4.3749 l -0.004 4.375 h -2.5 h -2.5 l 0.006 -6.8749 l 0.006 -6.8751 l 10 0 l 10 0 l 0.0171 -18.125 l 0.0171 -18.125 h 2.5 h 2.5 l -0.0284 30 l -0.0284 30 l 28.8 0 l 28.8 0 l 0.0313 -33.125 l 0.0313 -33.125 l -28.75 -0.027 l -28.75 -0.027 l -0.002 1.875 l -0.002 1.875 h -2.5 h -2.5 l 0.002 -1.875 l 0.002 -1.8751 h -3.125 h -3.125 l 0.002 -2.5001 l 0.002 -2.5 l 34.4 0 l 34.4 0 l 0.0195...

JavaScript

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2'));

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {
  type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  var png = canvas.toDataURL("image/png");
  document.querySelector('#png-container').innerHTML = '<img src="' + png + '"/>';
  DOMURL.revokeObjectURL(png);
};
img.src = url;