The <image> SVG element allows a raster image to be included in an SVG document.
Usage context
| Categories | Graphics element, Graphics referencing element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements |
Attributes
Global attributes
- Conditional processing attributes
- Core attributes
- Graphical event attributes
- Presentation attributes
- Xlink attributes
classstyleexternalResourcesRequiredtransform
Specific attributes
DOM Interface
This element implements the SVGImageElement interface.
Example
Basic rendering of a PNG image in an SVG object:
<svg width="100%" height="100%" viewBox="0 0 100 100"
xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink">
<image xlink:href="/files/6457/mdn_logo_only_color.png" x="0" y="0"
height="100" width="100" />
</svg>
Specifications
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 The definition of '<image>' in that specification. |
Candidate Recommendation | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<image>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.5 (1.8)[1] | 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)[1] | No support | (Yes) | 3.0.4 |
The chart is based on these sources.
[1] Prior to Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) only raster images were supported.