画像としての SVG
SVG 画像は、様々な場面で画像形式の一つとして使用することができます。多くのブラウザーは SVG 画像を以下の場所で対応しています。
- HTML の
<img>
または<svg>
要素 - CSS の
background-image
- CSS の
list-style-image
- CSS の
content
- SVG の
<image>
要素 - SVG の
<feImage>
要素 - キャンバスの
drawImage
関数
制限
セキュリティ上の目的で、 Gecko は SVG コンテンツを画像として扱う場合にいくつかの制限を設けています。
- JavaScript は無効になります。
- 外部のリソース(画像やスタイルシートなど)を読み込むことはできませんが、 data: URI を使用してインライン化されていれば可能です。
:visited
のリンクスタイルは描画されません。- プラットフォームネイティブのウィジェットのスタイル付け(OS のテーマに基づくもの)は無効です。
なお、上記の制限は画像のコンテキストに限定されたものです。 SVG コンテンツが直接表示された場合、または <iframe>
, <object>
, <embed>
の何れかの要素を使用して文書として埋め込まれた場合には適用されません。
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-background-image |