SVG <feImage> Filter

Last Updated:

What is <feImage> Filter?

The <feImage> SVG filter primitive fetches image data from an external source and provides the pixel data as output.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg width="210" height="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="point"> <feImage xlink:href="car-left.png"/> </filter> </defs> <rect x="1" y="1" width="200" height="200" filter="url(#point)"/> </svg> </body> </html>

Attributes Value

AttributeExplanation
preserveAspectRatio Specifies how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
xlink:href Specifies a reference to a resource.

Share this Page

Meet the Author