Export KinteticJS drawing to SVG?

Question

Is it possible to export Kinetic JS object to SVG?

Or workaround is to convert Kintetic JS's canvas to SVG.

EDIT:

The best is to use fabricJS since it supports canvas to SVG rendering while working with fabric objects.

I accepted Phrogz's answer since it also does conversion canvas to svg without using some other library for drawing on canvas.

EDIT 2: OK, i messed up, Phrogz's library is wrapper around canvas element so you use it's methods to draw on canvas (I thought that it just 'listens' on canvas and creates SVG paths). So the best solution is fabricJS definitely.

Answer 1

basicly you can convert the canvas to base64 png and then put it on svg

maybe this could help you

http://svgkit.sourceforge.net/tests/canvas_tests.html

Answer 2

The best solution is to use Fabric.js!

Answer 3

I've created an alpha version of a library that allows you to extend an HTML5 Canvas Context such that it tracks all vector drawing commands and stores them as an array SVG elements in a ctx.svgObjects property of the context.

You can see the library in action here: http://phrogz.net/svg/HTML5CanvasRecordsSVG.html
The demo turns on recording, draws a few shapes to the HTML5 Canvas, and then appends the 'recorded' SVG objects to an SVG container next door.

In general the library:

1. Keeps track of the current context transformation via an SVGMatrix object. (This is because the HTML5 Context api lets you set the current transform to a matrix, but does not let you get the current matrix.) It does this by intercepting calls like translate() and rotate() and updating the matrix accordingly.
2. Intercepts beginPath() and creates a new SVG Path element, and then intercepts further commands like moveTo() and lineTo() in order to add the equivalent path commands to the SVG path.
   • Note: not all path commands are supported or tested in the library at the time of this writing.
3. Intercepts fill() and stroke() to add a copy of the current SVG <path> to the svgObjects array, setting the current transformation matrix, fill and stroke styles.
   • Note: not all stroke styles (lineCap, lineJoin, miterLimit) are supported as of this writing.
   • Note: calling fill() followed by stroke() creates two separate SVG elements; there is no optimization to differentiate this specific case from stroke/fill, or changing the transform or path between calls.
4. Intercepts fillRect() and strokeRect() to create an SVG <rect> element.

More work could be done on this library to flesh out all the commands (not just path commands, but also things like fillText()). But it's not something that I personally need, so I'm not inclined to spend hours carrying it over the finish line.