SVGとは?

公開日: : html5, 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要素の基本的な使い方まとめ

関連記事

背景を SVG で全面表示し、パターン化をアニメーションさせる

背景を SVG で全面表示し、パターン化をアニメーションさせる

SVGでウィンドウに全面表示させた空に、シャボン玉が飛んでいるような表現をしてみようと思います。

記事を読む

画像からSVGを作る

Web アイコンフォント 作り方

SVG が欠かせないものとして、最近よく使われているのは、アイコンフォントです。 アイコンフォント

記事を読む

JavaScript タイピングゲーム スマホ用

Javascript タイピング ゲーム スマホ用 をつくる

JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや

記事を読む

HTML5 とは?

HTML5とは? HTML5は、標準化団体のW3C(World Wide Web Consorti

記事を読む

JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)

HTML5 audio タグ を使って音声を出す

HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生

記事を読む

html5 SVG

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテン

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その1

WordPress の最低限の機能だけのシンプルなテンプレートが欲しか

WordPress Warning エラー
WordPress フォルダー・ファイル系の関数 is_dir や opendir や exif_imagetype で Warning エラー

Wordpress の管理画面でフォルダーの中身を読み込む関数 ope

Wordpress 自作フォーム (チェックボックスなど)
WordPress 自作フォーム その3(チェックボックスなど)

以前、WordPress 自作フォーム その1の記事で Wordpre

Javascript ノード の取得や挿入
Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document

→もっと見る

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村 FC2 Blog Ranking
PAGE TOP ↑