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>不同,该属性是必须的
  • href (en-US)xlink:href (en-US):图像的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 推荐 初版规范

浏览器兼容性

BCD tables only load in the browser