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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18