HTML SVG

HTML5 はインライン SVG をサポートします。

SVGとは何ですか?

• SVGは、スケーラブルベクターグラフィックスを指します

• SVGは、Web用のベクターベースのグラフィックスを定義するために使用されます

• SVGは、XML形式を使用してグラフィックスを定義します

• SVG画像のグラフィック品質は、拡大やサイズ変更時に迷わない

• SVGはWorld Wide Web Consortiumの標準です

---

SVGの利点

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

• SVG 画像はテキストエディタで作成および変更できます

• SVG 画像は検索、インデックス付け、スクリプト化、または圧縮が可能です

• SVG はスケーラブルです

• SVG 画像どの解像度でも高品質で印刷できます

• SVGは画質を損なうことなく拡大できます

---

ブラウザのサポート

Internet Explorer 9以降、Firefox 、オペラ、Chrome、Safari はインライン SVG をサポートしています。

---

SVGをHTMLページに直接埋め込みます

HTML5 では、SVG 要素を HTML ページに直接埋め込むことができます:

プログラムの実行結果:

---

SVG チュートリアルの詳細については、SVG チュートリアルを参照してください。

---

SVG とその違いCanvas 間

SVG は、XML を使用して 2D グラフィックスを記述する言語です。

Canvas は JavaScript を通じて 2D グラフィックを描画します。

SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。

SVG では、描画されたすべての形状がオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。

キャンバスはピクセルごとにレンダリングされます。キャンバスでは、グラフィックが描画されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。

---

Canvas と SVG の比較

次の表は、Canvas と SVG の違いの一部を示しています。

Canvas	SVG
解像度に依存	解像度に依存しない
サポートされていない イベントハンドラー	サポートイベントハンドラー
テキストレンダリング機能が弱い	レンダリング領域が大きいアプリケーション(Googleマップなど)に最適

.pngまたは.jpg形式でレンダリングする機能結果を保存画像	複雑度が高いとレンダリングが遅くなります (DOM を過度に使用するアプリケーションは高速ではありません)
多くのオブジェクトが頻繁に使用される画像集約型のゲームに最適です 再描画	ゲームアプリケーションには適していません