Blog

CanvasにSVGファイルを読み込んで表示する

2015.12.15Cat:Canvas html5 SVG デザイナー

SVGは、Illustratorから直接ファイルを書き出すことができ、
書き出されたファイルのSVGのタグをHTML内に書き込むだけで、
HTML内に描画することができるので、扱いやすいですが、
多数の要素からなる、再描画を多く必要とするようなグラフィックが求められる場合、
パフォーマンスが著しく低下するという弱点があります(参考: SVG と Canvas: どちらを選ぶか (Windows))。

多数の要素からなる、再描画を多く必要とするようなグラフィックは、Canvasの方が向いており、
そういったグラフィックでは、高いパフォーマンスを発揮します。

しかし、CanvasはSVGのように、タグを置けば描画してくれたり、CSSで操作して色を変えたりアニメーションさせるといったことはできず、
より高度なグラフィックのプログラムの知識が必要となります。
描画した各要素をクリックしてリンクさせるといったことも、
SVGではHTMLのようにaタグで目的の要素を囲めばいいだけですが、
Canvasでは要素の位置を特定し、
マウスの座標との当たり判定を設けるなどの処置が必要で、
そういった操作に関するプログラムの必要性もあります。

ただ、やはり今後パフォーマンスの高いグラフィックを使ったWEBアプリなどを作成する上で、
Canvasは必要不可欠だと思いましたので、
今回は、Illustratorで書きだしたSVGファイルを、
Canvasの要素として読み込んで描画する方法がないか調べて、やってみました。

 

↓参考にさせていただいたサイト
DOM オブジェクトを Canvas に描画する – HTML | MDN

↓こちらが作ってみたもの
DEMO

 

方法

1.Illustratorで書きだしたSVGファイルの拡張子を.txtに変更する

Canvasで描画するときに、今回はBlobというJavaScriptのAPIを利用するのですが、
そのときに、テキスト情報としてSVGのデータを渡すので、SVGファイルの拡張子を.txtにして、
テキストファイルとして扱います。

2.AjaxでテキストファイルにしたSVGを読み込み、Imageオブジェクトに変換する

jQueryを使って、Ajaxによって、先ほど用意したファイルを読み込みます。

その後、Canvasの初期設定を行い、
Blob()を使って、SVGファイルを元に描画を行ったラスターの仮想画像ファイルを作成し、
その仮想の画像ファイルをImageオブジェクトのsrcとして指定します。

3.Canvasに描画する

それができたら、.drawImage()によって、CanvasにSVGから作成した画像を描画すれば完了です。
一度読み込んでしまえば、SVGデータではなくラスターの画像データとして扱うことができるので、
元のファイルはSVGですが、Canvasの高いパフォーマンスを邪魔すること無く扱うことができます。

Blob()や.createObjectURL()がFileAPIというIE9以下では対応できないものではありますが、
今後、利用の幅が広がっていくのではないかと思います。

 

その他参考サイト

Canvas に描いた画像を png などの形式の Blob に変換する方法: Tender Surrender

Blob – Web API インターフェイス | MDN

window.URL.createObjectURL – Web API インターフェイス | MDN

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ