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
Share your thoughts in the comments
Please Login to comment...