Canvas機能によってWeb上の表現力は格段に上がりました。同様にSVGも表現力を高めるのに役立っています。しかしCanvasはバイナリ、SVGはベクターと相容れない存在になっています。 この二つを結びつけられるライブラリがCanvas2Svgです。Canvasの内容をSVGとして出力できます。

Canvas2Svgの使い方

サンプルのコードです。とても簡単です。

var ctx = new C2S(500,500);

ctx.fillStyle="red";
ctx.fillRect(100,100,100,100);

var mySerializedSVG = ctx.getSerializedSvg(); //true here, if you need to convert named to numbered entities.

サンプルです。これはCanvasで描かれています。

SVGにした場合です。

こちらもCanvas上に描かれていますが、SVGに変換できます。

Canvas2Svgは表示されている情報をそのままSVGにしてくれます。お絵かきアプリのようなもので、画像出力とともにSVG出力をサポートしてみても面白そうです。どこまで再現力があるかは分かりませんが、面白いソフトウェアです。

Canvas2SvgはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

canvas2svg gliffy/canvas2svg: Translates HTML5 Canvas draw commands to SVG