非常教程

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)

?

?

?

SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。