The <feImage>
SVG filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an SVG image, it is rasterized.)
Usage context
Categories | Filter primitive element |
---|---|
Permitted content | Any number of the following elements, in any order:<animate> , <animateTransform> , <set> |
Attributes
Global attributes
- Core attributes
- Presentation attributes
- Filter primitive attributes
- XLink attributes
class
style
externalResourcesRequired
Specific attributes
DOM Interface
This element implements the SVGFEImageElement
interface.
Example
SVG
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feImage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);"/> </svg>
Result
Specifications
Specification | Status | Comment |
---|---|---|
Filter Effects Module Level 1 The definition of '<feImage>' in that specification. |
Working Draft | Added href attribute and deprecated xlink:href . Added crossorigin attribute. |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<feImage>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
feImage | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support Yes | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
href | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support 12.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android ? | Safari iOS Full support 12.2 | Samsung Internet Android Full support Yes |
preserveAspectRatio | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
xlink:href | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support Yes | Opera Full support 9 | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
See also
<filter>
<animate>
<animateTransform>
<set>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
- SVG tutorial: Filter effects