Open In App

SVG <feImage> Element

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads