<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

CategoriesFilter primitive element
Permitted contentAny number of the following elements, in any order:
<animate>, <animateTransform>, <set>

Attributes

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

desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
feImage
crossorigin
href
preserveAspectRatio
xlink:href
Deprecated

See also