Canvas2Svg.js

Why?

• You have a canvas drawing you want to persist as an SVG file.
• You like exporting things.
• Gliffy needed it and wanted to share.
• Because Atwood's Law.

But I want SVG to Canvas!

Sorry wrong project. Try the excellent canvg instead.

Examples, Please

Here's a rectangle:

//make a mock canvas context using canvas2svg. We use a C2S namespace for less typing:
var ctx = new C2S(500,500); //width, height of your desired svg file
//do your normal canvas stuff:
ctx.fillStyle="red";
ctx.fillRect(100,100,100,100);
//ok lets serialize to SVG:
var myRectangle = ctx.getSerializedSvg(true); //true here will replace any named entities with numbered ones.
                                      //Standalone SVG doesn't support most named entities.

The string output of myRectangle looks like this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
<defs></defs><g><rect fill="red" stroke="none" x="100" y="100" width="100" height="100"></rect></g></svg>

What good is that string? You can ping it against your server using "content-disposition: attachment" and let the user download it directly.

That's pretty boring, I want something meatier!

A ctx has been set up for you with a 600x600 canvas. Just use the interactive demo below:

Inline SVG

Serialized SVG

Anything else I should know?

• Some canvas context methods have not been implemented. (Honestly, some just don't make sense to implement.) Watch out for setTransform.
• There is basic support for gradients, clips, and patterns.
• Please create a github issue if you find bugs or have a feature request.

License:

MIT

Browser Support:

• Chrome
• FF
• IE9+

As long as your browser supports SVG and canvas, this library should mostly work. SVG is rather quirky between browser implementations though.

Credits:

Canvas2Svg.js was created by Gliffy Inc.