HTML5 SVG

SVG 定义为可缩放矢量图形

HTML5は、インラインSVGをサポートしています。HTML <svg> 要素はSVGグラフィックのコンテナです。SVGは、パス、四角形、円、テキスト、およびさまざまな図形を描画するための方法を提供します。

何はSVGか？

SVGは、Scalable Vector Graphics（スケーラブルベクターグラフィックス）を指します。ネットワークのベースに基づいて、ベクター画像を定義するために使用され、拡大またはサイズ変更した場合でも画質が損なわれません。SVGは、万維網連盟（W3C）の標準です。

SVGの利点

他の画像形式（JPEGやGIFなど）と比較して、SVGを使用する利点は以下の通りです：

SVG画像はテキストエディタで作成・編集ができます。
SVG画像は検索、インデックス付け、スクリプト化、または圧縮が可能です。
SVGはスケーラブルです。
どの解像度でも高品質で印刷できます。
SVG画像は拡大しても画質が劣化しません。

ブラウザサポート

以下の表は、各要素が対応している最初のブラウザバージョンを示しています。

要素	Chrome	Firefox	Safari	Opera	IE
<svg>	4.0	9.0	3.0	3.2	10.1

HTMLページにSVGを直接埋め込む

HTML5では、SVG要素を直接HTMLページに埋め込むことが可能です。

SVG 円

例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

SVG 五角星

例

<!DOCTYPE html>
<html>
<body>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
 
</body>
</html>

もっとSVGに関するチュートリアルを学びたい場合は、SVGチュートリアルをご覧ください。

SVGとCanvasの違い

SVGは、XMLを使って2Dグラフィックを記述する言語です。一方、CanvasはJavaScriptを使って2Dグラフィックを描画します。

SVGはXMLベースであるため、SVG DOM内の各要素は利用可能です。具体的には、特定の要素にJavaScriptのイベントハンドラーを添付することができます。一方、Canvasでは描画された図形はオブジェクトとして認識されません。図形の属性が変更された場合でも、ブラウザは自動的にグラフィックを再描画します。

Canvasはピクセルごとにレンダリングされ、図形が一度描画されると、位置が変わった場合、全体の描画を再度行う必要があります。

CanvasとSVGの比較

Canvas	SVG
解像度に依存	解像度に依存しない
イベントハンドリングをサポートしない	イベントハンドリングをサポートする
テキストレンダリングが弱い	大きなレンダリングエリアを持つアプリに最適（例：Google Maps）
.png または .jpg 形式で結果画像を保存可能	ドキュメントオブジェクトモデル（DOM）の過剰使用はパフォーマンスを低下させる可能性あり
再描画が頻繁に行われる画像集積型のゲームに最適	ゲーム用途には不向き

よくある質問 (QA)

SVGとは何ですか？

SVGとは、Scalable Vector Graphicsの略で、XML形式で2Dグラフィックを記述するための言語です。

SVGの利点は何ですか？

SVGはスケーラブルであり、テキストエディタで編集可能、検索やインデックス付けが可能です。また、拡大しても画質が劣化しません。

CanvasとSVGの違いは何ですか？

Canvasはピクセル単位でレンダリングされ、イベントハンドリングはサポートされません。一方、SVGは解像度に依存せず、イベントハンドリングをサポートします。