SVG <feImage> Element (original) (raw)

Last Updated : 31 Mar, 2022

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

Syntax:

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 `

    <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>

`

Output:

Example 2:

HTML `

    <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>

`

Output:

Example 3:

HTML `

    <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>

`

Output: