Skip to content

Instantly share code, notes, and snippets.

@gustavohenke
Created February 18, 2014 15:27
Show Gist options
  • Save gustavohenke/9073132 to your computer and use it in GitHub Desktop.
Save gustavohenke/9073132 to your computer and use it in GitHub Desktop.
SVG to PNG
var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );
var canvas = document.createElement( "canvas" );
var ctx = canvas.getContext( "2d" );
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );
img.onload = function() {
ctx.drawImage( img, 0, 0 );
// Now is done
console.log( canvas.toDataURL( "image/png" ) );
};
@mbosoft
Copy link

mbosoft commented Dec 7, 2021

sorry can somebody tell me what is container hier ? image Tag?
function svg_to_png(container) {
var wrapper = document.getElementById(container);
var svg = wrapper.querySelector("svg");

if (typeof window.XMLSerializer != "undefined") {
    var svgData = (new XMLSerializer()).serializeToString(svg);
} else if (typeof svg.xml != "undefined") {
    var svgData = svg.xml;
}

var canvas = document.createElement("canvas");
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width;
canvas.height = svgSize.height;
var ctx = canvas.getContext("2d");

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

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var imgsrc = canvas.toDataURL("image/png");

    var a = document.createElement("a");
    a.download = container+".png";
    a.href = imgsrc;
    a.click();
};

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment