Canvas VS SVG

これは 【その1】ドリコム Advent Calendar 2015 25日目(最終日)の記事です。

24日目の記事はSasasakiさんの UNREAL ENGINE 4 でクリスマスカードを作ってみた! です。

【その2】ドリコム Advent Calendar 2015 もあわせてどうぞ。

自己紹介

こんにちは、ジャオと申します。

中国天津から来てます。日本語はよくなくて申し訳ございません。 あるゲームのサーバーサイドエンジニアです。フロントエンド技術大好きです。

Canvas VS SVG

CanvasSVGHTML5の標準の一部です。どちらもウェブページでDOMみたいな制限なしで自分が好きなように図形などを描くことができます。

恥ずかしいですが、自分はあんまり触ったことがないです。最近余裕があって勉強して見ました。入社研修の時のcocos-2dxで作ったゲームをCanvasで作り直して、SVGでデーターチャートを作ってみました。この記事で勉強の時感じたこの二つ技術の差を述べたいと思います。

書きやすい?読みやすい?

Canvasは全部JSで図形を書きます。APIはあんまり把握しやすくないと思います。

例えば円形を描く時、まずcontext.beginPath() をコールします。次にcontext.arc(x, y, r, startAngle, endAngle, anticlockwise)によって円形を定義します。

その後context.fillStyleとcontext.strokeStyle / context.lineWidthの値の設定によってフィルとストロークのスタイルを定義します。最後にcontext.stroke()とcontext.fill()によって円形をアウトプットします。

SVGは普通のマークアップ言語で、attributeによって図形を定義します。比較的に書きやすくて読みやすいと思います。同じ円形を描く場合、下記のようにタグひとつで済みます。あと、attributeを使わず普通のCSSでスタイルを調整することもできます。

<circle cx="100" cy="100" r="50" fill="red" stoke="green" stroke-width="2"/>

下記は具体的な一例です。こんなやつを描くとCanvasSVGのコード量はどうでしょうか。

f:id:cliffzhao:20151224140147p:plain

Canvas

See the Pen WrGjBN by cliffzhao (@cliffzhao) on CodePen.

SVG

See the Pen xZEdNX by cliffzhao (@cliffzhao) on CodePen.

やっぱりSVGは便利だと思います。コードの行数は少なくて理解しやすいですね。

User Interaction

Canvasは含めている図形ごとにイベントハンドラーを指定することができず、Canvas全体だけで指定することができます。イベントハンドラーの基本的な行為はユーザーの操作によってCanvas全体を書き直しです。下記のような図形をクリックして図形の色を変える実装で、Canvas全体にクリックのイベントハンドラーはクリックの位置を判断して、Canvasを書き直すかどうかを決めます。

f:id:cliffzhao:20151224143014p:plainf:id:cliffzhao:20151224143030p:plain

See the Pen VeKbOd by cliffzhao (@cliffzhao) on CodePen.

SVGは含めている図形が全部DOMとしてHTMLドキュメントに入っていますので、普通に図形にidかclassを指定して、下記のようにJSで直接にイベントハンドラーを指定することができます。あと、CSSの:hoverなどのPseudoを使っても簡単にUser Interactionを実現することもできます。

See the Pen PZGmvL by cliffzhao (@cliffzhao) on CodePen.

動画

Canvasは動画機能が全然ついていないので、動画を実装する方法はある頻度で書き直すしか無いです。

SVGは動画タグがあってSVGだけで簡単な動画ができます。あと、SVGの含めている図形が全部DOMなので普通の動画JS Libraryで動画を実装することもできます。

ブラウザー対応状況

CanvasSVGはほぼ同じでIE9+ / Firefox / Chrome / Safariと大体全部のモバイルブラウザーで支えます(http://caniuse.com/#feat=canvashttp://caniuse.com/#feat=svg)。古いIEの対応としてexcanvas.js(Canvas / https://github.com/arv/explorercanvas)とraphael.js(SVG / http://raphaeljs.com/)が使用できます。

パフォーマンス

状況によって違います。

画面が大きくなるとピクセル数が増えるので、Canvasのパフォーマンスは低下します

。一方、画面上のオブジェクトが増加すると、SVGがDOMに追加するオブジェクト数も増えるので、SBGのパフォーマンスは低下します。

まとめ

項目 Canvas SVG
API 簡単 困難
対話性 良い 良くない
動画実装 簡単 困難
ブラウザー対応状況 同じ 同じ
パフォーマンス 要素が多い場合はよい 要素が少ない場合はよい

総合的にいうとSVGのほうが実装しやすいと思います。特にAdobe Illustratorなどのツールによって直接に作成することができます。要素が多いゲームや画像編集ツールなど以外の場合、例えばチャートなど、SVGで実装したほういいと思います。