SVG <feImage> Element

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <feImage> SVG filter primitive fetches image data from an external source and provides the pixel data as output.

Syntax:

<feImage x="" y="" width="" height="" externalResourcesRequired ="" 
preserveAspectRatio="" xlink:href=""/>

Attributes:

x: It defines the x-axis coordinate in the user coordinate system.
y: It defines the y-axis coordinate in the user coordinate system.
width: The width of the foreignObject.
height: The height of the foreignObject.
externalResourcesRequired: It indicates whether the external resources are required in the current document. Default value is false.
preserveAspectRatio: It indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
xlink:href: It defines a reference to a resource as a reference IRI.
crossorigin: It tells the request of the browser for an image file with cross-origin permissions.

Example 1:

HTML

<!DOCTYPE html>
<html>

<body>
    <svg width="250" height="250">
        <defs>
            <filter id="id_1">
                <feImage xlink:href=
"https://media.geeksforgeeks.org/wp-content/
uploads/20201106171852/Untitled189-2.png" />
            </filter>
        </defs>

        <g>
            <rect x="1" y="1" width="300" 
                height="200" fill="green" 
                stroke="green" />

            <rect x="50" y="25" width="150" 
                height="150" 
                filter="url(#id_1)" />
        </g>
    </svg>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<body>
    <svg width="250" height="250">
        <rect id="Img" width="100%" height="80%" 
            stroke="black" fill="gold" />

        <filter id="id_2" 
            primitiveUnits="objectBoundingBox">
            
            <feImage xlink:href="#Img" x="25%" 
                y="30%" width="50%" height="50%" 
                result="waves" />

            <feComposite operator="atop" 
                in="waves" in2="SourceAlpha" />
        </filter>

        <g>
            <rect x="1" y="1" width="300" 
                height="200" fill="red" 
                stroke="blue" />

            <rect x="50" y="25" width="150" 
                height="150" 
                filter="url(#id_2)" />
        </g>
    </svg>
</body>

</html>

Output:

Example 3:

HTML

<!DOCTYPE html>
<html>

<body>
    <svg width="500" height="500">

        <filter id="id_3" 
            primitiveUnits="objectBoundingBox">
        
            <feImage xlink:href=
"https://media.geeksforgeeks.org/wp-content/
uploads/20201106171852/Untitled189-2.png" 
                x="0" y="0" width="100%" 
                height="100%" 
                preserveAspectRatio="xAlignYAlign"
                result="waves" />

            <feComposite operator="atop" 
                in="waves" in2="SourceImage" />
        </filter>

        <g>
            <ellipse cx="200" cy="150" 
                rx="180" ry="100" fill="gold" 
                stroke="#ff0000" />

            <ellipse cx="200" cy="150" rx="75"
                ry="75" fill="black" 
                filter="url(#id_3)" />
        </g>
    </svg>
</body>

</html>

Output:

Explore