SVG as an Image
SVG as an Image
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属性
- SVG <image> 元素
- SVG <feImage> 元素
- Canvas
drawImage函数
局限
如果SVG作为一个图像，出于安全目的，Gecko在SVG环境上作了一些限制：
- 禁用了JavaScript。
- 外部源（比如说：图像、样式表）不能载入，然而行内源可以使用（利用BlobBuilder对象URL或者data: URI属性）。
- 链接的
:visited伪类不能呈现。
- 禁用了平台原生的小部件样式（基于操作系统主题）
注意上面的限制是对图像环境专有的；它们不能应用到直接看到的SVG上，也不能应用到嵌入在HTML的<iframe>元素、<object>元素和<embed>元素中的SVG上。
规范
| Specification | Status | Comment |
|---|---|---|
| HTML5The definition of 'SVG within <img> element' in that specification. | Recommendation | Defines the usage of SVG within <img> elements. |
| CSS Backgrounds and Borders Module Level 3The definition of 'SVG within 'background-image' CSS property' in that specification. | Candidate Recommendation | Defines the usage of SVG within the background-image property. |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| in HTML <img> | 4.0 | 4.0 (2) | 9 | 9.0 | 4 |
| in CSS background | 4.0 | 4.0 (2) | 9 | 9.5 | 5 |
| in other contexts | ? | 4.0 (2) | ? | ? | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| in HTML <img> | 3.0 | 4.0 (2) | ? | 10.0 | 4.0 |
| in CSS background | 3.0 | 4.0 (2) | ? | 10.0 | 3.21 |
| in other contexts | ? | 4.0 (2) | ? | ? | ? |
