SVGとは?
SVGとは?
SVG（Scalable Vector Graphics）は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。
- ブラウザ上で閲覧でき、テキストエディタ等で編集することができる。
- ベクター画像を表示出来る。（拡大や縮小をしても描写の劣化が起きない。）
- ハイパーリンクを埋め込んだり、JavaScript 等と連携させることもできる。
- フィルター処理・アニメーションの実行が可能。
- スタイルシートを使った見た目の制御が可能。
基本サンプルコード
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="50" cy="50" r="50" fill="red" /> <rect x="50" y="50" width="100" height="100" fill="blue" /> </svg>
SVGの表示
HTML5では、Inline SVG がサポートされ、HTML内にSVG を直接記述できるようになりました。imgタグ、objectタグ、embedタグ、iframeタグ、での表示も可能です。
SVGをHTMLに直接埋め込む サンプルコード
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="50" fill="red" />
<rect x="50" y="50" width="100" height="100" fill="blue" />
</svg>
</body>
</html>
SVGをobjectタグで表示する サンプルコード
主要なすべてのブラウザでサポートされていて、HTML4、XHTML、HTML5の標準だが、スクリプトが使用できない。
<object width="200" height="40" data="svgimg.svg" type="image/svg+xml" classid="clsid:377B5106-3B4E-4A2D-8520-8767590CAC86"> <param name="src" value="svgimg.svg" /> 代替表示 </object>
SVGをembedタグで表示する 基本サンプルコード
主要なすべてのブラウザでサポートされていて、スクリプトが使用可能。HTML5では使用可だが、HTML4とXHTMLで非推奨。
<embed src="svgimg.svg" type="image/svg+xml" />
HTML5 において Canvas と SVG
HTML5 において、Wikipedia の説明にもあるように、画像を動的に描画する大まかな形式は以下でいいと思います。
- 2次元ビットマップ画像 ＝ Canvas
- 2次元ベクター画像 ＝ SVG
- 3次元画像 ＝ WebGL
しかし、Canvas と SVG どちらを使えばいいのか、実際は少し迷うところなので、まずそれぞれの特徴で比べてみます。
Canvas要素の特徴
実装は手間だが、セキュリティレベルは高い
javascriptでAPIを制御して描画するので、全てをjavascriptで記述する必要があるが、
コードを難読化したりするだけで、内部構造を保護出来きる。外部からの画像解読も困難。
アニメーションの実装が手間がかかるが、一度表示すれば速い
アニメーションさせるには、いったん描いたものを明示的に消して再描画する必要があり、座標のスクリプトも計算で再描画させる為、実装には手間がかかる。HTML上の扱いはimgタグ画像と同じなので、一度表示すればSVGより少し速い。
パフォーマンスは複雑なグラッフィックには適している
描画コンテキストを取得し、それを用いて線を引いたり、円弧を描いたりできるだけの低レベルの2次元グラフィックAPIを使用。DOM型のSVGよりは、表現に制限が少なくパフォーマンス調整しやすい。複雑な動作を行うグラフィックを描いたり、膨大な数のオブジェクトを描画するには適している。ブラウザ内部にcanvas要素のサイズの描画メモリ領域が確保されるので、サイズが大きい程パフォーマンスの低下が予想される。
機種と設計
ほとんどのスマートフォンで稼働し、挙動のデバイス差が少なく設計しやすい。
SVG要素の特徴
実装は容易だが、セキュリティ保護がほぼ出来ない
SVG要素として描画を記述する。XML形式のフォーマットなので、DOMとして要素が展開されていくので実装しやすいが、その為、ページの内部や画像を外部から容易に解析することが出来る。
描画とパフォーマンスはDOM型であるため複雑だと不利
SVGの要素はDOMツリーとしてブラウザ内部に保持される。複雑な画像となるとDOMに展開される要素の数が膨大に増加するため、パフォーマンスの低下が予想される。
アニメーションが簡単に実装出来る
DOMが変更されるとブラウザが自動的にグラフィックを書き換えてくれるため、スクリプトの内容が短くなる。アニメーション用の拡張(SMIL)が備わっていて、アニメーションをはじめとした画像処理を簡単に行える。
機種と設計
予め定義されている要素の範囲内で処理を行うこととなるので、CANVAS要素ほどの自由度はない。（一般的な利用にあたってはそれほど問題が出るケースない。）
InlineSVG iOS4系,Android2系が対応不完全
結果
どっちをどう使うか一概には言えないが、用途として簡単にまとめると以下。
ゲームやグラフはCANVAS要素
大量のスクリプトを要するゲームや複雑なグラフ等CANVAS要素を用いたほうが自由に作り込める分有利である。
ロゴやバナーはSVG要素
SVG要素は拡大縮小など劣化がないベクターを表示し、アニメーションも容易に出来る点から、ロゴやバナー等に向いている。
参考サイト
詳しくは以下の参考サイトを参照
svg要素の基本的な使い方まとめ
関連記事
-
-
Javascript タイピング ゲーム スマホ用 をつくる
JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや
-
-
canvas タグでお絵描き（レスポンシブ）
簡単なメモ張みたいなものが欲しいので作ってみました。 canvas のレスポンシブが少しひっかかっ
-
-
HTML5 audio タグ を使って音声を出す
HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生
-
-
WordPress エラー：Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラーの状態 WordPress 管理画面のテキスト入力欄で（ビジュアルタブの
-
-
背景を SVG で全面表示し、パターン化をアニメーションさせる
SVGでウィンドウに全面表示させた空に、シャボン玉が飛んでいるような表現をしてみようと思います。
-
-
Web アイコンフォント 作り方
SVG が欠かせないものとして、最近よく使われているのは、アイコンフォントです。 アイコンフォント
-
-
WEBページをアプリっぽくする（サービスワーカーでホーム画面に追加）
前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具体的には、スマホで最近よく見か
