¿Cómo puedo agregar un elemento <image> al DOM SVG?

Tengo una página web con una imagen jpg en la que el usuario dibuja un garabato SVG además de usar Raphael.

Quiero permitir que el usuario guarde una versión rasterizada combinada de esto cuando haya terminado (haré otra cosa con la versión SVG)

Cuando el usuario haga clic en guardar, quiero agregar esa imagen de fondo al SVG DOM generado como un elemento y luego usar canvg para escribir el SVG en un elemento de lienzo. Finalmente, uso el método toDataUrl () para convertirlo en un jpg.

No consigo que la parte central funcione: ¿cuál es la mejor manera de agregar la imagen al DOM? Cuando uso el siguiente código, aparece un error de javascript que dice que appendChild () no es una función.

Me pregunto si tiene algo que ver con la forma en que obtengo el SVG utilizando el método .html (). ¿Tal vez lo que se devuelve no se interpreta como un documento SVG real?

Cualquier ayuda muy apreciada.

    function saveImage(){

        var img = document.getElementById('canvas').toDataURL("image/png");
        window.open(img,'Download');

    }

    $('#save').click(function(){

        var svg = $('#editor').html();

        // Create new SVG Image element.  Must also be careful with the namespaces.
        var svgimg = document.createElementNS("http://www.w3.org/2000/svg", "image");
        svgimg.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', "myimage.jpg");


        // Append image to SVG
        svg.appendChild(svgimg);

        canvg('canvas', svg, {renderCallback: saveImage(), ignoreMouse: true, ignoreAnimation: true, ignoreDimensions: true});

    });

Respuestas a la pregunta(1)

Su respuesta a la pregunta