HTML5になってから新しく出てきたグラフィックス要素にSVGとCanvasがあります。Canvasはバイナリとして生成され、SVGはベクターデータでありその使い分けはできるでしょう。しかし逆にSVGデータをCanvas内に描画したい時もあるはずです。 そこで使ってみたいのがcanvg.jsです。SVGデータをパースし、Canvas内に描画してくれるライブラリです。

canvg.jsの使い方

サンプルです。右側が素のSVG、左側がcanvg.jsによる出力です。

テキスト出力の再現度も高いです。

こんな細かい帳票も再現できます。

カラーリングにも対応。

canvg.jsはさらにオブジェクトを描画したり、アニメーションにも対応しています。SVGをSVGのままだけでなく、Canvasと組み合わせることでゲームに使ったり、編集不可のデータを生成したりするのに使えそうです。

canvg.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

canvg.js test gabelerner/canvg