SVG <feImage> Element
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 <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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...