<image>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

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

SVG 软件必须支持的图像格式只有 JPEGPNG 和其他 SVG 文件。并未定义有关动画 GIF 的行为。

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

备注: HTML 规范定义 <image><img> 在用作 HTML 解析时是等效的。这种特定元素及其行为仅适用于 SVG 文档或内联 SVG。

使用上下文

类别图形元素、图形引用元素、可渲染元素
允许的内容任意数量、任意顺序的下列元素:
动画元素
描述性元素
<animate><animateMotion><animateTransform><discard><script><set><style>

属性

  • x:图像水平方向上到原点的距离。
  • y:图像竖直方向上到原点的距离。
  • width:图像宽度。和 HTML <img> 不同,该属性是必需的。
  • height:图像高度。和 HTML <img> 不同,该属性是必需的。
  • hrefxlink: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>

结果

规范

Specification
Scalable Vector Graphics (SVG) 2
# ImageElement

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
image
crossorigin
decoding
height
href
preserveAspectRatio
systemLanguage
width
x
xlink:href
Deprecated
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.