
<svg width="5cm" height="7cm" viewBox="0 0 700 500">
<title>Example feMorphology - Examples of erode and dilate</title>
<desc>Five text strings drawn as outlines. The first is unfiltered. The second and third use 'erode'. The fourth and fifth use 'dilate'.</desc>
<defs>
<filter id="Erode3">
<feMorphology operator="erode" in="SourceGraphic" radius="3"/>
</filter>
<filter id="Erode6">
<feMorphology operator="erode" in="SourceGraphic" radius="6"/>
</filter>
<filter id="Dilate3">
<feMorphology operator="dilate" in="SourceGraphic" radius="3"/>
</filter>
<filter id="Dilate6">
<feMorphology operator="dilate" in="SourceGraphic" radius="6"/>
</filter>
</defs>
<rect style="fill:none; stroke:blue; stroke-width:2" x="1" y="1" width="698" height="498"/>
<g style="enable-background: new">
<g style="font-family:Verdana; font-size:75; fill:none; stroke:black; stroke-width:6">
<text x="50" y="90">Unfiltered</text>
<text x="50" y="180" style="filter:url(#Erode3)">Erode radius 3</text>
<text x="50" y="270" style="filter:url(#Erode6)">Erode radius 6</text>
<text x="50" y="360" style="filter:url(#Dilate3)">Dilate radius 3</text>
<text x="50" y="450" style="filter:url(#Dilate6)">Dilate radius 6</text>
</g>
</g>
</svg>