Attributes
Vachmi
The <feMorphology> filter primitive is used to erode or dilate the input image. Its usefulness lies especially in fattening or thinning effects.
Attribute
Description
in
Identifies the input for the filter primitve
operator
This attribute has two meanings based on the context itʼs used in.
Either it defines the compositing or morphing operation to be performed.
radius
This attribute represents the radius (or radii) for the operation on a given <feMorphology> filter primitive.
If two numbers are provided, the first number represents the x-radius and the second one the y-radius.
If one number is provided, then that value is used for both x and y.
A negative or zero value disables the effect of the given filter primitive.
If two numbers are provided, the first number represents the x-radius and the second one the y-radius.
If one number is provided, then that value is used for both x and y.
A negative or zero value disables the effect of the given filter primitive.
Here is the SVG code to draw this filter.
Image with feMorphology filter with operator = "erode"
<svg id='feMorphology1' stroke='#0E1A27' stroke-width='2' xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 100 100'>
<filter id="filter1" x="-40" y="-20" width="100" height="200">
<feMorphology operator="erode" radius="1"/>
</filter>
<text x="20" y="50" fill="red" filter="url(#filter1)">Eroded!!!</text>
</svg>
<filter id="filter1" x="-40" y="-20" width="100" height="200">
<feMorphology operator="erode" radius="1"/>
</filter>
<text x="20" y="50" fill="red" filter="url(#filter1)">Eroded!!!</text>
</svg>
Image with feMorphology filter with operator = "dilate"
<svg id='feMorphology1' stroke='#0E1A27' stroke-width='1' xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 100 100'>
<filter id="filter1" x="-40" y="-20" width="100" height="200">
<feMorphology operator="dilate" radius="1"/>
</filter>
<text x="20" y="50" fill="red" filter="url(#filter1)">Dilated!!!</text>
</svg>
<filter id="filter1" x="-40" y="-20" width="100" height="200">
<feMorphology operator="dilate" radius="1"/>
</filter>
<text x="20" y="50" fill="red" filter="url(#filter1)">Dilated!!!</text>
</svg>