<feImage>
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
crossorigin
preserveAspectRatio
xlink:href
Deprecated
DOM Interface
This element implements the SVGFEImageElement
interface.
Example
SVG
html
<svg
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200"
height="200">
<defs>
<filter id="image">
<feImage href="mdn_logo_only_color.png" />
</filter>
</defs>
<rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);" />
</svg>
Result
Specifications
Specification |
---|
Filter Effects Module Level 1 # feImageElement |
Browser compatibility
BCD tables only load in the browser
See also
- SVG Filter primitive attributes
flood-color
attributeflood-opacity
attribute<filter>
<animate>
<animateTransform>
<set>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
- SVG tutorial: Filter effects