SVG <feMorphology> Element
Last Updated :
08 Jun, 2022
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
The <feMorphology> SVG Element lets you “thin” or “thicken” a graphic. It specifies an operator with a value of erode to thin or dilate to thicken a graphic. The radius attribute tells us how much the lines are to be thickened or thinned, it also helps to make an animation to change the pixels of the image.
What is Morphing?
To morph means to transform or alter the form or the shape of an object.
Syntax:
<defs>
<!--erode-->
<filter id="erode">
<feMorphology operator="erode" radius="1" />
</filter>
<!--dilate-->
<filter id="dilate">
<feMorphology operator="dilate" radius="2" />
</filter>
</defs>
Attributes:
- Global Attributes: Some global attributes are used like core attributes and styling attributes, etc.
- Specific Attributes: It is used to change the attributes of in, type, and values.
The SVG <feMorphology> Element object has these properties:
- height: Gets or sets the height of an element.
- in1: Identifies input for the given filter primitive.
- operator: Specifies the operation of whether to thin or thicken.
- Radius X: Specifies the thickening or thinning you want to apply in the X-direction.
- Radius Y: Specifies the thickening or thinning you want to apply in the Y direction.
- result: Provides a reference for the output result of a filter.
- width: Defines the width of an element.
- x: Gets or sets the x-coordinate value.
- y: Gets or sets the y-coordinate value.
Example 1: The Erode is help to make the image size (dimensions) to get smaller:
HTML
<!DOCTYPE html>
<html>
<body>
<svg width="450" height="300" viewBox="0 0 450 300">
<filter id="morphology">
<feMorphology operator="erode" radius="0">
<animate attributeName="radius"
from="0" to="5" dur="5s"
repeatCount="indefinite" />
</feMorphology>
</filter>
<image
xlink:href=
width="90%" height="90%" x="10" y="10"
filter="url(#morphology)"></image>
</svg>
</body>
</html>
|
Output:
Example 2: In the Dilate is help to make the image size ( dimension) to get Larger:
HTML
<!DOCTYPE html>
<html>
<body>
<svg width="450" height="300" viewBox="0 0 450 300">
<filter id="morphology2">
<feMorphology operator="dilate" radius="0">
<animate attributeName="radius"
from="0" to="5" dur="5s"
repeatCount="indefinite" />
</feMorphology>
</filter>
<image
xlink:href=
width="90%" height="90%" x="10" y="10" )"></image>
</svg>
</body>
</html>
|
Output:
Example 3: This is the illustration of both above examples in one:
HTML
<!DOCTYPE html>
<html>
<body>
<svg width="450" height="300" viewBox="0 0 450 300">
<filter id="morphology2">
<feMorphology operator="dilate" radius="0">
<animate attributeName="radius"
from="0" to="5" dur="5s"
repeatCount="indefinite" />
</feMorphology>
</filter>
<image xlink:href=
width="90%"
height="90%" x="10" y="10" )">
</image>
</svg>
<svg width="450" height="300" viewBox="0 0 450 300">
<filter id="morphology">
<feMorphology operator="erode" radius="0">
<animate attributeName="radius"
from="0" to="5" dur="5s"
repeatCount="indefinite" />
</feMorphology>
</filter>
<image xlink:href=
width="90%"
height="90%" x="10" y="10"
filter="url(#morphology)">
</image>
</svg>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...