конвертировать SVG в холст со встроенным изображением

Question

Я создаю элемент svg, который я хотел бы загрузить на свой компьютер. Когда я пытаюсь сделать это как есть, загрузка, которую я получаю, всегда пуста. Я думаю, что это как-то связано с последними несколькими строками, но я не уверен, в чем проблема.
В качестве руководства я использовал следующий ответ StackOverflow: Рисование файла SVG на холсте HTML5

, а также этот рабочий jsfiddle: https://jsfiddle.net/pcLrydh5/

Когда я запускаю скрипт, это пример моих данных base64:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxpbWFnZSBocmVmPSJodHRwczovL2kuaW1nZmxpcC5jb20vMXVyOWIwLmpwZyI+PC9pbWFnZT48dGV4dCBpZD0iTWVtZUJveDAiIHk9IjIwIiB4PSIyMCIgZm9udC1zaXplPSIwIj5tZW1lIHRleHQwPC90ZXh0Pjx0ZXh0IGlkPSJNZW1lQm94MSIgeT0iMTE0IiB4PSI2OCIgZm9udC1zaXplPSIyOSIgZmlsbD0ieWVsbG93Ij5tZW1lIHRleHQxPC90ZXh0Pjx0ZXh0IGlkPSJNZW1lQm94MiIgeT0iMjAiIHg9IjIwIiBmb250LXNpemU9IjMyIiBmaWxsPSJibHVlIj5tZW1lIHRleHQyPC90ZXh0Pjwvc3ZnPg==

пример моего вывода svg XML:

<svg xmlns="http://www.w3.org/2000/svg"><image href="https://i.imgflip.com/1ur9b0.jpg"></image><text id="MemeBox0" y="20" x="20" font-size="26" fill="blue">meme text0</text><text id="MemeBox1" y="69" x="83" font-size="28">meme text1</text><text id="MemeBox2" y="189" x="158" font-size="31" fill="green">meme text2</text></svg>

код, который запускает все. Это срабатывает, когда я щелкаю метку привязки:

const CreateCanvas = (event,Svg)=>{
    const svg = document.querySelector('svg');
    const img = document.createElement('img');
    img.style.width = svg.style.width;
    img.style.height = svg.style.height;

    const canvas = document.querySelector('canvas');
    console.log(img);
    //const xml = new XMLSerializer().serializeToString(svg);
    const xml = svg.outerHTML;
    console.log(xml);
    const svg64 = window.btoa(xml);
    const b64Start = 'data:image/svg+xml;base64,';
    const image64 = b64Start + svg64;
    img.src = image64;
    console.log(canvas);
    canvas.getContext('2d').drawImage(img,0,0);
    var dt = canvas.toDataURL('image/png'); // << this fails in IE/Edge...
    window.open(dt);
  dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
  dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');
  // console.log(dt);
  // console.log(event.currentTarget.href);
  event.currentTarget.href = dt;