svg to image (png)

svg to image (png)

http://jsfiddle.net/a9ude9p0/6/

#html

<div>
<svg class="svg icon icon_type_turbo-rocket turbo-promo__logo" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path class="svg__path" d="M5.3 8c.423-.54.937-1.11 1.523-1.7 2.295-2.31 4.84-2.446 5.082-2.202.242.245.09 2.77-2.205 5.08-.59.594-1.16 1.112-1.7 1.536v1.62c0 .666.015.688-.406 1-.225.166-1.194.96-2.234 1.597-.255.158-.466.028-.304-.2.44-.62.756-1.173.95-1.66.178-.446.177-.842-.003-1.19-.663.212-1.218.15-1.626-.248-.41-.4-.472-.96-.253-1.633-.348-.183-.746-.185-1.195-.006-.488.194-1.04.51-1.66.95-.23.16-.358-.05-.202-.305C1.704 9.6 2.5 8.63 2.666 8.404 2.978 7.985 3 8 3.666 8H5.3zm-2.05 3.605c.14.14-1.72.956-1.72 2.867 1.91 0 2.726-1.86 2.866-1.72.14.14-.31 1.22-1.074 1.984C2.558 15.5 1.53 16 0 16c0-1.528.5-2.557 1.265-3.32.764-.766 1.845-1.214 1.984-1.075zM.7 8c-.004.322-.404.348-.4 0 .048-4.418 2.992-8 7.696-8s8 3.3 8 8-3.582 7.668-8 7.698c-.15 0-.217-.098-.217-.197-.002-.1.065-.2.216-.2 3.698.008 6.802-3.3 6.802-7.3s-2.802-6.804-6.802-6.804C3.996 1.196.752 3.906.7 8z" fill="currentColor"></path></svg>
</div>
<canvas></canvas>




#js


var html = document.querySelector("svg").parentNode.innerHTML;
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");
    canvas.setAttribute('width', 16);
    canvas.setAttribute('height', 16);

var image = new Image;
  image.src = imgsrc;
  image.onload = function() {
      context.drawImage(image, 0, 0);      
      var canvasdata = canvas.toDataURL("image/png");
      var a = document.createElement("a");
      a.textContent = "save";
      a.download = "export_"+Date.now()+".png";
      a.href = canvasdata; 
      document.body.appendChild(a);
      canvas.parentNode.removeChild(canvas);
};