Получите SVG из элемента canvas и сохраните его.

В настоящее время я создаю небольшое приложение для друга, который начинает работу над докторской диссертацией и ему нужно построить несколько сетевых графов. Пока все работает нормально, используя график Force Directed. Узлы графиков можно перемещать, чтобы стилизовать макет.

Я никак не могу понять:

«как извлечь данные из холста и сохранить их в файл SVG» .

Что я пробовал:

Я уже пытался получить доступ к данным изображения из консоли с помощью

var app.canvas = document.getElementById( 'graph-canvas' )
   .getContext( '2d' )
       .getImageData( 0, 0, 200, 200 );

и получил в ответ (object) ImageData. Теперь я могу получить доступ к показанным данным холста ↑ с помощью app.canvas.data. (Когда я тоже пытаюсь найти значения, браузер начинает зависать и спрашивает, следует ли остановить скрипт -Chrome и FF последний ).

Как мне перейти отсюда, чтобы нарисовать SVG, а затем сохранить его одним нажатием кнопки?

РЕДАКТИРОВАТЬ:

До сих пор я узнал, как нарисовать SVG и добавить к нему элемент image/png. Как бы то ни было, он не отображается.

// Add the test SVG el:
var svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
svg.setAttribute( 'style', 'border: 1px solid black;' )
       .setAttribute( 'width', '600' )
       .setAttribute( 'height', '400' )
       .setAttributeNS(
            'http://www.w3.org/2000/xmlns/',
            'xmlns:xlink',
            'http://www.w3.org/1999/xlink'
        );

// Call
importCanvas( document.getElementById( 'infovis-canvas' ), svg ); 

// Function: Add data to SVG
function importCanvas( sourceCanvas, targetSVG ) 
{
    // get base64 encoded png data url from Canvas
    var img_dataurl = sourceCanvas.toDataURL( "image/png" );

    var svg_img = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "image"
    );

    svg_img.setAttributeNS(
        'http://www.w3.org/1999/xlink',
        'xlink:href',
        img_dataurl
    );
    jQuery( targetSVG.appendChild( svg_img ) )
       .appendTo( '#graph-container' );

    console.log( 'done' ); // Log & confirm
}

И, наконец,...

//...resulting SVG element containing the image element