Save D3 svg as a high quality image

ValarDohaeris Published at Dev

ValarDohaeris

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();

Kaiido

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.