Skip to content
Related Articles

Related Articles

Improve Article

SVG <feImage> Element

  • Last Updated : 18 Nov, 2020

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:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :