画像としての SVG

SVG 画像は、様々な場面で画像形式の一つとして使用することができます。多くのブラウザーは SVG 画像を以下の場所で対応しています。

Gecko 固有の場所

さらに、 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)では次の場所でも SVG の使用に対応しています。

制限

セキュリティ上の目的で、 Gecko は SVG コンテンツを画像として扱う場合にいくつかの制限を設けています。

  • JavaScript は無効になります。
  • 外部のリソース (画像やスタイルシートなど) を読み込むことはできませんが、 data: URI を使用してインライン化されていれば可能です。
  • :visited-のリンクスタイルは描画されません。
  • プラットフォームネイティブのウィジェットのスタイル付け (OS のテーマに基づくもの) は無効です。

なお、上記の制限は画像のコンテキストに限定されたものです。 SVG コンテンツが直接表示された場合、または <iframe>, <object>, <embed> の何れかの要素を使用して文書として埋め込まれた場合には適用されません。

仕様書

仕様書 状態 備考
HTML5
SVG within <img> element の定義		 勧告 <img> 要素内の SVG の使い方を定義。
CSS Backgrounds and Borders Module Level 3
SVG within 'background-image' CSS property の定義		 勧告候補 background-image プロパティ内の SVG の使い方を定義。

関連情報