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