Sorry wrong project. Try the excellent canvg instead.
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.
A ctx has been set up for you with a 600x600 canvas. Just use the interactive demo below:
As long as your browser supports SVG and canvas, this library should mostly work. SVG is rather quirky between browser implementations though.
Canvas2Svg.js was created by Gliffy Inc.