Tengo una imagen SVG que incluye dos imágenes PNG que las convierte en una imagen SVG, ahora quiero convertir esta imagen a PNG/JPG. Tengo el siguiente código de SVG en reaccionar:

 import P1 from "../../assets/P1.png"; import P2 from "../../assets/P2.png";

 <canvas id="imageCanvas" width="321" height="469"></canvas> <img id="imageR" ></img> <svg id="imageCard" name="imageCard" width="321" height="469" xmlns="http://www.w3.org/2000/svg"> <image href={P2} width="321" height="469" /> <image href={P1} x="93" y="151" width="48" height="48" /> </svg>

Muestra el resultado correcto en el navegador, ahora quiero convertir esta imagen svg a formato PNG/JPG, probé una solución para convertir esta imagen a lienzo primero y luego a PNG:

 var svg = document.querySelector('svg'); var img = document.querySelector('#imageR'); var canvas = document.querySelector('#imageCanvas'); // get svg data var xml = new XMLSerializer().serializeToString(svg); // make it base64 var svg64 = btoa(xml); var b64Start = 'data:image/svg+xml;base64;charset=utf-8,'; // prepend a "header" var image64 = b64Start + svg64; // set it as the source of the img element img.onload = function () { // draw the image onto the canvas canvas.getContext('2d').drawImage(img, 0, 0); } ImageBase64 = image64; img.src = image64;

pero no funciona correctamente, solo funciona si no uso la etiqueta de imagen dentro del SVG, por favor guíeme, gracias.