<image>

**<image>** SVG 元素在 SVG 文档中包含图像。它可以显示 光栅图像 文件或其他 SVG 文件。

SVG 软件必须支持的唯一图像格式是 JPEG、PNG 和其他 SVG 文件。动画 GIF 行为未定义。

使用 <image> 显示的 SVG 文件 被视为图像：不会加载外部资源，:visited 样式 不会应用，它们也不能进行交互。要包含动态 SVG 元素，请尝试使用 <use> 以及外部 URL。要包含 SVG 文件并在其中运行脚本，请尝试在 <foreignObject> 中使用 <object>。

**注意：** HTML 规范将 <image> 定义为解析 HTML 时 <img> 的同义词。此特定元素及其行为仅在 SVG 文档或内联 SVG 中适用。

使用环境

类别图形元素、图形引用元素
允许的内容以下元素的任意数量，以任何顺序
动画元素
描述性元素

属性

  • x：从原点水平定位图像。
  • y：从原点垂直定位图像。
  • width：图像渲染的宽度。与 HTML 的 <img> 不同，此属性是必需的。
  • height：图像渲染的高度。与 HTML 的 <img> 不同，此属性是必需的。
  • href 和 xlink:href ：指向图像文件的 URL。
  • preserveAspectRatio：控制图像的缩放方式。
  • crossorigin：为 CORS 请求定义凭据标志的值。
  • decoding：为浏览器提供提示，说明它应该同步或异步执行图像解码。

DOM 接口

<image> 实现 SVGImageElement 接口。

示例

在 SVG 中基本渲染 PNG 图像

SVG

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="mdn_logo_only_color.png" height="200" width="200" />
</svg>

结果

规范

规范
可缩放矢量图形 (SVG) 2
# ImageElement

浏览器兼容性

BCD 表仅在浏览器中加载