Get SVG from canvas element and save it

Currently I'm creating a small application for a friend, who´s starting his PhD and needs to build some network graphs. So far everything works fine using the a Force Directed graph. The graphs nodes can be moved to style the layout.

The thing I can't get my head around is:

»how to extract the data from the canvas and save it to a SVG file«.

What I tried:

I already tried accessing the image Data from the console with

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

and got an (object) ImageData in return. Now I can access the ↑ shown canvas data with app.canvas.data. (When I try too look up the values, the browser starts hanging and asks if the script should be stopped - Chrome & FF latest).

How would I go from here to get the SVG drawn and then saved by the click of a button?

EDIT:

So far I found out how to draw the SVG and add an image/png element to it. How ever, it´s not displaying.

// 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",
        "imag