Method to convert HTML5 canvas to SVG?

Question

I need to convert an HTML5 canvas to SVG for editing. How can I achieve this?

Answer 1

Try canvas2svg.js. [Demo]

I ran into needing this myself and ended up writing a library for this. At the time, the other libraries were a bit sparse, or didn't generate valid SVG.

The basic concept is the same though. You create a mock canvas 2D context and then generate an SVG scene graph as you call canvas drawing commands. Basically you can reuse the same drawing function. Depending on what context you pass to it, you either draw to a standard 2D canvas or generate an SVG document that you can serialize.

You can't actually "transform" a canvas element that's been drawn to, as it's just a bitmap, so keep that in mind. When you export to SVG you're really just calling the same drawing function again using a fake context.

So as a quick example:

//create a canvas2svg mock context
var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height

var draw = function(ctx) {
    //do your normal drawing
    ctx.fillRect(0,0,200,200);
    //etc...
}

draw(myMockContext);
myMockContext.getSerializedSvg(); //returns the serialized SVG document
myMockContext.getSvg(); //inline svg

Answer 2

canvas-svg lets you save 2d http://code.google.com/p/canvas-svg/ you can do the reverse with canvg http://code.google.com/p/canvg/

Answer 3

See also http://code.google.com/p/html5-canvas-svg/

Fabric.js advertises having a "canvas-to-svg" parser, and it has a demo which apparently converts canvas to SVG. While the other items do work if you use the controls and then "Rasterize canvas to" SVG, it does have an issue converting the default image and doesn't export all objects as path data (ie, if you imported the svg into fabric without path data, it can't "vectorize" it as of 2020), so you'd have to check whether this is actually capable of converting raw canvases to SVG or only if creating items through the editor.

Answer 4

I think the canvas must already be drawing an svg for this method, but I found it in the course of trying to create a download svg button myself, also ran into this stack overflow question in the same search figured it may be relevant.

from https://bramp.github.io/js-sequence-diagrams/

around line 200ish, but who knows he may edit site in the future

editor is just a div element, and for the purpose of this noise, he's just packing the stuff the svg was generated off of into the downloaded svg.

diagram_div is the canvas the actual svg is sitting in.

function(ev) {
  var svg = diagram_div.find('svg')[0];
  var width = parseInt(svg.width.baseVal.value);
  var height = parseInt(svg.height.baseVal.value);
  var data = editor.getValue();
  var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>';

  var a = $(this);
  a.attr("download", "diagram.svg"); // TODO I could put title here
  a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml));
}