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