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:
Output:
👁 Image
Example 2:
Output:
👁 Image
Example 3:
Output:
👁 Image