画像としての SVG
SVG 画像は、様々な場面で画像形式の一つとして使用することができます。多くのブラウザーは SVG 画像を以下の場所で対応しています。
- HTML の
<img>または<svg>要素 - CSS の
background-image
Gecko 固有の場所
さらに、 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)では次の場所でも SVG の使用に対応しています。
- CSS の
list-style-image - CSS の
content - SVG の
<image>要素 - SVG の <feImage> (en-US) 要素
- Canvas の
drawImage関数
制限
セキュリティ上の目的で、 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 の使い方を定義。 |