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 图像:

html

<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>

规范

Specification
Scalable Vector Graphics (SVG) 2
# ImageElement

浏览器兼容性

BCD tables only load in the browser