Replace SVG Image with PNG

replace-svg.js

function svgToPNG(svg) {
  return new Promise((resolve, reject) => {
    let img = document.createElement("img");
    let finalImg = document.createElement("img");
    let svgSize = svg.getBoundingClientRect();

    let canvas = document.createElement("canvas");
    canvas.width = svgSize.width;
    canvas.height = svgSize.height;
    let ctx = canvas.getContext("2d");

    // when final image is ready
    finalImg.onload = function () {
      // replace svg image
      svg.replaceWith(finalImg);
      // resolve promise
      resolve(finalImg);
    };

    img.onload = function () {
      //  now draw image to scale in canvas
      ctx.drawImage(img, 0, 0, svgSize.width, svgSize.height);
      // convert to data url
      let imageData = canvas.toDataURL("image/png");
      // set src attribute
      finalImg.setAttribute("src", imageData);
    };

    // now start the processing
    let svgData = new XMLSerializer().serializeToString(svg);

    img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
    // ensure image is scaled to size
    img.setAttribute("width", svgSize.width);
    img.setAttribute("height", svgSize.height);
  });
}

// To use...
let svg = document.querySelector("svg");
await svgToPNG(svg);