image - SVG 编辑

SVG文档中的SVG元素包含图像信息。它表现为图像文件或者其他SVG文件。

SVG图像格式转换软件支持JPEG、PNG格式，是否支持动图GIF不明确。

SVG文件是这样的一种图像：不被当做外部资源加载，不可以用:visited 样式，不能有交互。使用动态SVG元素，可以用<use>引入外部的URL。使用SVG文件并添加scripts在里面，可以用<object> 放在 <foreignObject>中。

注意：HTML规范中定义<image>和<img>在解析时是等效的。这种规范只适用于SVG文件或SVG区块内。

用法

类别	图形元素, 图形引用元素
允许的内容物	任意数量、任意排序的下列元素： 动画元素 描述性元素

属性

全局属性

• 条件处理属性 »
• 核心属性 »
• 图形事件属性 »
• Xlink属性 »
• 外观属性 »
• class
• style
• externalResourcesRequired
• transform

专有属性

• x：图像水平方向上到原点的距离
• y：图像竖直方向上到原点的距离
• width：图像宽度。和HTML的<img>不同，该属性是必须的
• height：图像高度。和HTML的<img>不同，该属性是必须的
• xlink:href：图像的URL指向
• preserveAspectRatio：控制图像比例

DOM接口

该元素实现SVGImageElement 接口。

示例

在SVG对象中基本呈现PNG图像:

<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>

说明

版本	状态	注释
Scalable Vector Graphics (SVG) 2 <image>	Candidate Recommendation 候选推荐	允许省略高度和宽度
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <image>	Recommendation 推荐	初版规范

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.5 (1.8)	9.0	8.0	3.0.4

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	3.0	1.0 (1.8)	未实现	(Yes)	3.0.4

该表格基于这些资源。