JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="svg-container">
    <svg id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="850" height="440">
      <g class="subplot xy">
        <rect x="78" y="78" width="694" height="284" style="stroke-width: 0px; fill: #ffffff; fill-opacity: 1;"></rect>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <svg preserveAspectRatio="none" x="80" y="80" width="690" height="280" style="fill: none;" viewBox="0 0 690 280">
          <g class="errorbars" style="stroke: #000000;"></g>
          <g class="errorbars" style="stroke: #000000;"></g>
          <g class="errorbars" style="stroke: #000000;"></g>
          <g class="errorbars" style="stroke: #000000;"></g>
          <g class="errorbars" style="stroke: #000000;"></g>
          <g class="trace scatter" style="stroke-miterlimit: 2; opacity: 1;">
            <path class="js-fill" data-curve="0" d="M0,275.87L14.08,247.04L28.16,232.85L42.24,253.86L56.33,246.47L70.41,243.89L84.49,217.25L98.57,217.82L112.65,225.6L126.73,241.67L140.82,253.84L154.9,216.99L168.98,207.33L183.06,212.18L197.14,251.33L211.22,242.07L225.31,234.25L239.39,221.58L253.47,217.92L267.55,228.46L281.63,224.71L295.71,253.29L309.8,202.84L323.88,225.91L337.96,229.59L352.04,216.11L366.12,225.59L380.2,222.05L394.29,194.73L408.37,209.7L422.45,189.5L436.53,242.94L450.61,191.95L464.69,200.14L478.78,204.29L492.86,184.43L506.94,231L521.02,223.42L535.1,176.94L549.18,179.33L563.27,182.01L577.35,193.65L591.43,208.45L605.51,226.7L619.59,191.43L633.67,173.51L647.76,176.67L661.84,182.12L675.92,190.75L690,163.75L690,280L0,280Z"
            style="stroke-width: 0px; fill: #df3f1a; fill-opacity: 1;"></path>
            <path class="js-fill"...

JavaScript

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2'));

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg); 
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var png = canvas.toDataURL("image/png");
    document.querySelector('#png-container').innerHTML = '<img src="'+png+'"/>';
    //DOMURL.revokeObjectURL(png);
  var pasteImg = document.getElementsByClassName('ze_body');
pasteImg.innerHTML =  '<img src="'+png+'"/>'
};
img.src = url;