Fork me on GitHub

Why?

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:

Click to load more examples: Complex | Gradient | Text
Inline SVG
Serialized SVG

Anything else I should know?

License:

MIT

Browser Support:

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.