<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>