Как добавить элемент в SVG DOM

У меня есть веб-страница с изображением в формате jpg, на котором пользователь рисует SVG-каракули поверх с помощью Raphael.

Я хочу, чтобы пользователь мог сохранить объединенную растровую версию этого, когда они закончат (я сам буду делать что-то еще с версией SVG)

Когда пользователь нажимает кнопку «Сохранить», я хочу добавить это фоновое изображение в сгенерировал SVG DOM как элемент, а затем использовал canvg для записи SVG в элемент холста. Наконец, я использую метод toDataUrl(), чтобы превратить его в jpg.

У меня не работает средний бит — как лучше всего добавить изображение в DOM? Когда я использую приведенный ниже код, я получаю ошибку javascript, в которой говорится, что appendChild() не является функцией.

Мне интересно, имеет ли это какое-то отношение к тому, как я получаю SVG с помощью метода .html() — возможно, то, что когда-либо возвращается, не интерпретируется как настоящий документ SVG??

Будем признательны за любую помощь.

    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});

    });