2

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.

vale4674
  • 4,161
  • 13
  • 47
  • 72
  • Kinect is an HTML5 Canvas library. HTML5 Canvas is a bitmap format (sometimes drawn to using vector-like commands). SVG is a vector format. The simplest answer is to take the output of your canvas and use it as an image in an SVG file. What are you really trying to do? – Phrogz Apr 16 '12 at 17:07
  • Thx, but that is not an option because I need SVG paths, not base64 png because of the file size after. – vale4674 Apr 16 '12 at 18:16
  • Are you canvas drawings comprised only of path commands that could be captured? Can you alter the source of the JS populating the canvas? – Phrogz Apr 16 '12 at 18:25
  • We are trying to make a drawing application which could export to SVG. You say that I could write my own SVG renderer based on my JS data since I know what I am drawing on canvas? – vale4674 Apr 16 '12 at 18:53
  • You could swap out your HTML5 graphics context with a wrapper object that performs the same actions, but also records all the paths and strokes and whatnot. (Either per update, or storing only the commands for the last update.) You could then translate the recorded commands to SVG commands. When I get time I'll work up an answer based on this. – Phrogz Apr 16 '12 at 19:50
  • Not sure about Kinetic, but [Fabric.js](http://fabricjs.com) allows you to export drawing into SVG. – kangax Apr 17 '12 at 13:48
  • @kangax Yes I've been using fabric until now but decided to work with Path instead with predefined objects (Rect, Ellipse etc). I posted an [issue](https://github.com/kangax/fabric.js/issues/150) on your's gitHub page about paths but I didn't get reply so I started looking for different options. But then I realized that [quadratic curve example](http://fabricjs.com/quadratic-curve/) has some errors. Check my issue post, I'll update it now. (I am back on fabric :)) – vale4674 Apr 17 '12 at 17:04
  • @vale4674 Ah, sorry. Yeah, I don't usually have much time to handle issues and group messages. Although I should have more time soon. – kangax Apr 19 '12 at 13:39

3 Answers3

4

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.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • You should probably call cloneNode with the argument for whether you wanted shallow or deep cloning. When the argument is missing gecko seems to do deep cloning, while webkit does shallow cloning and Opera throws an exception. – Erik Dahlström Apr 17 '12 at 10:46
  • @ErikDahlström Ah, good point, thanks. I often forget about FF's pickiness in this regard. Fixed. – Phrogz Apr 17 '12 at 12:42
  • @Phrogz I'll accept your answer since it is the best solution for asked question although I will be using fabric.js – vale4674 Apr 17 '12 at 17:09
  • @vale4674 I had not seen that before. You should add your own answer suggesting Fabric.js and accept that instead; it's a better, more robust, supported answer. – Phrogz Apr 17 '12 at 17:12
  • @Phrogz I'll edit my answer and suggest fabric. But I will keep your answer as the best since my main question was canvas -> SVG and your library does that. – vale4674 Apr 17 '12 at 17:19
4

The best solution is to use Fabric.js!

Phrogz
  • 296,393
  • 112
  • 651
  • 745
vale4674
  • 4,161
  • 13
  • 47
  • 72
0

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

chepe263
  • 2,774
  • 22
  • 38
  • Thx, but that is not an option because I need SVG paths, not base64 png because of the file size after. – vale4674 just now edit – vale4674 Apr 16 '12 at 18:16
  • well... as far as i know, all you can do is embed images in png but for pure svg you might need advanced tools to trace an image into paths – chepe263 Apr 16 '12 at 18:22
  • Ok, I'll try something else then. – vale4674 Apr 16 '12 at 18:53