SVG画像は様々なコンテキストのイメージフォーマットとして使用することができます。多くのブラウザはSVG画像を以下のコンテキストでサポートします。
- HTML
<img>or<svg>elements - CSS
background-image
Gecko-specific contexts
さらに、Gecho 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)では次のコンテキストでのSVGの使用もサポートしています。
- CSS
list-style-image - SVG
<image>element - SVG
<feimage>element - Canvas
drawImagefunction
Restrictions
セキュリティ上の目的で、GekoはSVGコンテンツを画像として扱う場合にいくつかの制限を設けています。
- JavaScript は無効。
- 外部のリソース (例 画像, スタイルシート) は読み込むことができません。 though they can be used if inlined through BlobBuilder object URLs or data: URIs.
:visited-のリンクスタイルは描画されない。- Platform-native widget styling (based on OS theme) is disabled.
Note that the above restrictions are specific to image contexts; they don't apply when SVG content is viewed directly, or when it's embedded as a document via the <iframe>, <object>, or <embed> elements.
ブラウザ実装状況
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
in HTML <img> |
4 | Unknown (4) | 9 | 9.0 | 4 |
| in CSS background | 4 | Unknown (4) | 9 | 9.5 | 5 |
| in other contexts | ? | Unknown (4) | ? | ? | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
in HTML <img> |
3.0 | 4.0 (4) | ? | 10.0 | 4.0 |
| in CSS background | 3.0 | 4.0 (4) | ? | 10.0 | 3.2 (Partially supported) |
| in other contexts | ? | 4.0 (4) | ? | ? | ? |
Compatibility data from caniuse.com
仕様
- HTML 5, Section 4.8.1: The img element
- CSS Backgrounds and Borders Module Level 3, Section 3.3: The 'background-image' property
- Inline SVG in HTML and XHTML