ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

そこで使ってみたいのがcanvg.jsです。SVGデータをパースし、Canvas内に描画してくれるライブラリです。

canvg.jsの使い方

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

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

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

カラーリングにも対応。
カラーリングにも対応。

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

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

canvg.js test

gabelerner/canvg

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2