La conversión del bloque div que incluye el gráfico sag d3 en la imagen arroja un error Contenido adicional al final del documento

 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. },

Estoy usando el método anterior para convertir un bloque que incluye un gráfico d3 en su interior (que es un SVG) en una imagen; sin embargo, cuando hago clic en el enlace de la consola desde img.src, arroja un error Extra content at the end of the document ¿Qué es? incorrecto y cómo puedo solucionar este problema de conversión y convertirlo en la imagen correctamente para pasarlo en el PDF más tarde