SVG参考手册
其他 | Miscellaneous
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) |
? |
? |
? |