Converting div block that includes sag d3 chart into the image throws an error Extra content at the end of the document

 SVG2PNG() {
  var canvas = document.createElement('canvas'); // Create a Canvas element.
  var ctx = canvas.getContext('2d'); // For Canvas returns 2D graphic.
  //var data = svg.outerHTML; // Get SVG element as HTML code.
    var svg = document.querySelector('.chart-root').innerHTML;
   console.log(svg)
  var img = new Image();
  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
  canvas.width = 300,
  canvas.height = 500
  img.onload = function() {
    canvas
            .getContext('2d')
            .drawImage(img, 0, 0);
  }
  console.log(img.src)
  //return await canvg(canvas, data); // Render SVG on Canvas.

},

I am using above method for converting a block that includes d3 chart inside it (which is an SVG) into image however when I click the link in the console from img.src it throws an error Extra content at the end of the document What is wrong and how can I fix this conversion problem and convert it into the image properly for passing it in the PDF later