We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

SVG图像可以作为一种图片格式用在很多环境中。很多浏览器支持在下列环境中应用SVG图像:

Gecko专有的环境

另外,Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)引入了在以下环境中支持使用SVG:

局限

如果SVG作为一个图像,出于安全目的,Gecko在SVG环境上作了一些限制:

  • 禁用了JavaScript
  • 外部源(比如说:图像、样式表)不能载入,然而行内源可以使用(利用BlobBuilder对象URL或者data: URI属性)。
  • 链接的:visited伪类不能呈现。
  • 禁用了平台原生的小部件样式(基于操作系统主题)

注意上面的限制是对图像环境专有的;它们不能应用到直接看到的SVG上,也不能应用到嵌入在HTML的<iframe>元素、<object>元素和<embed>元素中的SVG上。

规范文档

规范 状态 注释
HTML5
SVG within <img> element
Recommendation 定义了<img>元素内部的SVG用法。
CSS Backgrounds and Borders Module Level 3
SVG within 'background-image' CSS property
Candidate Recommendation 定义了background-image属性中的SVG的用法。
Inline SVG in HTML5 and XHTML Editor's Draft 定义了HTML和XHTML内部的SVG的行内用法。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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.2[1]
in other contexts ? 4.0 (2) ? ? ?

[1] Safari移动浏览器只有在CSS background中实现了对SVG的部分支持

参见

文档标签和贡献者

标签: 
此页面的贡献者: fanxiaojie
最后编辑者: fanxiaojie,