svg to png

by Sahil Kashyap

HTML

<svg id="generated-svg" class="generated-svg" width="300px" height="500px"
    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style type="text/css">
    
      @font-face {
        font-family: Parisienne;
        src:...

JavaScript

var svg = document.getElementById('generated-svg');
var svgData = new XMLSerializer().serializeToString( svg );

var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 500;
var ctx = canvas.getContext("2d");

//display image
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );


img.onload = function() {
ctx.drawImage( img, 0, 0 );

//image link
console.log( canvas.toDataURL( "image/png" ) );


//open image 
window.location.href=canvas.toDataURL( "image/png" );
};