image

SVG文档中的SVG元素包含图像信息。它表现为图像文件或者其他SVG文件。

SVG图像格式转换软件支持JPEG、PNG格式，是否支持动图GIF不明确。

SVG文件是这样的一种图像：不被当做外部资源加载，不可以用:visited 样式，不能有交互。使用动态SVG元素，可以用<use>引入外部的URL。使用SVG文件并添加scripts在里面，可以用<object> 放在 <foreignObject>中。

注意：HTML规范中定义<image>和<img>在解析时是等效的。这种规范只适用于SVG文件或SVG区块内。

用法

类别图形元素, 图形引用元素
允许的内容物任意数量、任意排序的下列元素：
动画元素
描述性元素

属性

全局属性

专有属性

  • x：图像水平方向上到原点的距离
  • y：图像竖直方向上到原点的距离
  • width：图像宽度。和HTML的<img>不同，该属性是必须的
  • height：图像高度。和HTML的<img>不同，该属性是必须的
  • xlink:href：图像的URL指向
  • preserveAspectRatio：控制图像比例

DOM接口

该元素实现SVGImageElement 接口。

示例

在SVG对象中基本呈现PNG图像:

<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" />
</svg>

说明

版本 状态 注释
Scalable Vector Graphics (SVG) 2
<image>		 Candidate Recommendation 候选推荐 允许省略高度和宽度
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<image>		 Recommendation 推荐 初版规范

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 1.0 (1.8) 未实现 (Yes) 3.0.4

该表格基于这些资源。

文档标签和贡献者