Save D3 svg as a high quality image

Question

is there any way to save a D3 SVG image as a high quality image? If yes please explain... As of now i am using following code to save svg as image,but images i am getting are not high quality-

var canvas1 = document.createElement('canvas');
canvas1.id     = "canvas1";
canvas1.width  = w+50;
canvas1.height = h+50;
document.getElementById('pngcon').appendChild(canvas1);

var html = new XMLSerializer().serializeToString(document.getElementById(chartId).querySelector('svg'));

var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);

 var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var canvasdata;
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image, 0, 0);

  canvasdata = canvas.toDataURL("image/png");

var a = document.createElement("a");
a.id="imagepng"
a.download = chartname+".png";
a.href = canvasdata;
document.body.appendChild(a);
document.getElementById("imagepng").click();

Answer 1

Simply changing the width / height of your canvas should give your a bigger output image.

Furthermore, you'll probably need to change context.drawImage(image, 0, 0); to context.drawImage(image, 0, 0, canvas.width, canvas.height);)

 var w = 100, h = 100; var canvas1 = document.createElement('canvas'); canvas1.id = "canvas1"; canvas1.width = w * 50; canvas1.height = h * 50; document.getElementById('pngcon').appendChild(canvas1); var html = new XMLSerializer().serializeToString(document.getElementById(`chartId`).querySelector('svg')); var imgsrc = 'data:image/svg+xml;base64,' + btoa(html); var canvas = document.getElementById("canvas1"); var context = canvas.getContext("2d"); var canvasdata; var image = new Image; image.src = imgsrc; image.onload = function() { context.drawImage(image, 0, 0, canvas.width, canvas.height); canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.id = "imagepng" a.innerHTML = "output file, right click - save as since click() won't work in snippet"; a.download = "output.png"; a.href = canvasdata; document.body.insertBefore(a, document.getElementById(`chartId`)); } 

 <div id="chartId"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800" xml:space="preserve" height="500" width="500"> <g id="layer1" transform="translate(-3.6028037,-330.49911)"> <g id="g3691"> <path id="path1160" fill="#FFFFFF" stroke="#000000" stroke-width="17.9963" stroke-linecap="round" stroke-linejoin="round" d=" M24.5,518.1c27.3-62.2,84.5-97.3,127.7-78.3c43.2,19,56.1,84.8,28.8,147c-27.3,62.2-35.6,91.9-117.7,58.7 C19.6,627.8-2.8,580.3,24.5,518.1S-2.8,580.3,24.5,518.1z" /> <path id="path1162" fill="#FFFFFF" stroke="#000000" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" d=" M736.6,520.7c-27.3-62.2-84.5-97.3-127.7-78.3c-43.2,19-56.1,84.8-28.8,147s35.6,91.9,117.7,58.7 C741.5,630.4,763.9,582.9,736.6,520.7L736.6,520.7z" /> <path id="path1159" fill="#FFFFFF" stroke="#000000" stroke-width="3.5115" stroke-linecap="round" stroke-linejoin="round" d=" M641.7,645.4c0,390.6-532.8,390.6-532.8,0S641.7,254.8,641.7,645.4z" /> <path id="path3026" fill="#FFFFFF" stroke="#000000" stroke-width="8.9982" d="M375.4,513.3 c-6.5,0-84.5-26.3-124.4-16.8c-71.2,16.8-102.3,69.9-84.2,169.7c8.7,48,33.7,79,33.7,79s-55.7,19.6-47.9,97.2 c10.4,103.6,121,147.3,238.3,146.4c98.6-0.8,211-47.9,212.4-141.2c1.1-83.1-24.6-86.8-46.6-103.6c5.2-6.5,16.7-41.7,31.1-93.3 c22-79-15.5-142.5-107.5-155.4C443.3,489.9,383.1,513.3,375.4,513.3z" /> <path id="path3027" fill="none" stroke="#000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d=" M299.4,556.7c27.3-1.1,30.3,75.3,3,76.4l0,0C275.1,634.1,272.1,557.8,299.4,556.7z" /> <path id="path3028" fill="none" stroke="#000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d=" M450.2,633c-27.3,1.2-30.6-75.2-3.3-76.4l0,0C474.2,555.5,477.5,631.9,450.2,633z" /> <path id="path3029" fill="none" stroke="#000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d=" M420.4,694.6c0,32-92.5,32-92.5,0l0,0C327.9,662.6,420.4,662.6,420.4,694.6z" /> <path id="path3030" fill="none" stroke="#000000" stroke-width="31.4936" stroke-linecap="round" d=" M214.7,826.6c63.5,86.8,242.2,111.4,330.3,2.6" /> </g> </g> </svg> </div> <div id="pngcon"></div> 

Side note, if you only need to download the image, you don't need to actually append the canvas to the document, you can leave it in browser's cache.