image
<image>
该<image>SVG元素包括SVG文档内的图像。它可以显示光栅图像文件或其他SVG文件。
唯一的图像格式SVG软件必须支持JPEG,PNG和其他SVG文件。动画GIF的行为是未定义的。
显示的SVG文件<image>被视为图像:不加载外部资源,:未应用已访问的样式,它们不能交互。要包含动态SVG元素,请使用外部URL <use>。包括SVG文件,并在其内部运行的脚本,尝试<OBJECT>里面的<foreignObject>。
注意:在解析HTML时,HTML规范定义<image>为<img>的同义词。此特定元素及其行为仅适用于SVG文档或内联SVG。
用法上下文
分类 | 图形元素,图形引用元素 |
---|---|
允许的内容 | 任意数量的以下元素,以任何顺序排列:动画元素描述性元素 |
属性
全局属性
- Conditional processing attributes
- Core attributes
- Graphical event attributes
- Presentation attributes
- Xlink attributes
class
style
externalResourcesRequired
transform
具体属性
x
: Positions the image horizontally from the origin.
y
: Positions the image vertically
from the origin.
- width: The width the image renders at. Unlike HTML's <img>, this attribute is required.
- height: The height the image renders at. Unlike HTML's <img>, this attribute is required.
xlink:href
: Points at a URL for the image file.
preserveAspectRatio
: Controls how the image is scaled.
DOM接口
<image>实现SVGImageElement界面。
例
Basic rendering of a PNG image in SVG:
<svg viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="100" width="100"/>
</svg>
产品规格
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2The definition of '<image>' in that specification. | Candidate Recommendation | Allows omitting height and width |
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<image>' in that specification. | Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.5 (1.8) | 9.0 | 8.0 | 3.0.4 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 3.0 | (Yes) | 1.0 (1.8)1 | No support | (Yes) | 3.0.4 |