Get SVG from canvas element and save it

Question

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 Direc

Answer 1

If you're limited to ImageData you're out of luck, because that's just a mere pixel array (see reference). You can't obtain a meaningful SVG image from there. You can probably pull off a .png representation...but that's a static image with no interaction.

If you're going to do some sort of canvas to SVG export, it's important how you're doing the canvas drawing. The best approach would be to use a library that maintains a canvas scene graph.

Fabric.js seems to be a good choice. You can do the drawing with canvas and then call canvas.toSVG() and get your svg image.