javascript - ¿Convertir cadena SVG a Blob de URL e insertar en Canvas?

Tengo un problema que no parece que pueda resolver... Cuando pongo un objeto 'Image()' (de tipo SVG) con una ruta de archivo correcta dentro de la función 'context.drawImage(img, 0, 0)', todo parece funcionar correctamente.

Sin embargo, necesito seguir modificando partes del SVG, como escalar sin estirar los gráficos, y esto no parece posible con las funciones regulares de canvas, o al menos es insuficiente para mis necesidades.

Pude hacer esto antes cuando ponía el elemento SVG en el DOM, sin canvas, y luego manipulaba sus atributos usando getElementByID() y setAttribute(), lo cual funcionaba bien. Sin embargo, no pude hacerlo dentro de un Canvas...

Así que mi idea era tratar los datos SVG como una cadena dentro del archivo TS/JS, y luego convertirlo en un archivo de imagen y finalmente obtenerlo en el Canvas. El problema es que no renderiza nada, pero si copias el enlace 'blob' en el navegador se muestra correctamente.

Aquí está el proyecto de StackBlitz para demostrar el problema:

Proyecto de StackBlitz de SVG a Canvas

Parte del código:

let svg = `<svg id="svg-1" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
       ...
     </svg>`;

const blob = new Blob([svg], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);
const image = document.createElement("img");
image.addEventListener("load", () => URL.revokeObjectURL(url), {
  once: true
});

image.src = url;

console.log(image.src);
console.log(url); // Check the URL in the browser, including blob:,
// it should display fine.

ctx.drawImage(image, 0, 0, 100, 100); // I don't get why it doesn't
// ctx.restore();