The <feMorphology> SVG filter primitive is used to erode or dilate the input image. Its usefulness lies especially in fattening or thinning effects.
Like other filter primitives, it handles color components in the linearRGB color space by default. You can use color-interpolation-filters to use sRGB instead.
| Categories | Filter primitive element |
|---|---|
| Permitted content | Any number of the following elements, in any order:<animate>, <set> |
This element implements the SVGFEMorphologyElement interface.
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="180">
<filter id="erode">
<feMorphology operator="erode" radius="1" />
</filter>
<filter id="dilate">
<feMorphology operator="dilate" radius="2" />
</filter>
<text y="1em">Normal text</text>
<text id="thin" y="2em">Thinned text</text>
<text id="thick" y="3em">Fattened text</text>
</svg>text {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 3em;
}
#thin {
filter: url("#erode");
}
#thick {
filter: url("#dilate");
}<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<filter id="erode">
<feMorphology operator="erode" radius="1" />
</filter>
<filter id="dilate">
<feMorphology operator="dilate" radius="2" />
</filter>
</svg>
<p>Normal text</p>
<p id="thin">Thinned text</p>
<p id="thick">Fattened text</p>p {
margin: 0;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 3em;
}
#thin {
filter: url("#erode");
}
#thick {
filter: url("#dilate");
}