From http://www.w3schools.com (Copyright Refsnes Data)

SVG feMorphology Element

SVG Reference Complete SVG Reference

Definition and Usage

The SVG feMorphology element is used to "fattening" or "thinning" a source graphic.

The operator attribute defines whether to erode or dilate the source graphic. The operator attribute can take one of the following values:

The radius attribute defines the radius for the operation. If two numbers are specified, the first number is the x-radius and the second number is the y-radius. If one number is specified, then that value is used for both x and y. Default is 0

Example 1

The following example shows examples of six types of feMorphology operations.

Copy the following code into Notepad and save the file as "femorphology_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<filter id="Erode1">
<feMorphology operator="erode" in="SourceGraphic" radius="1" />
</filter>
<filter id="Erode3">
<feMorphology operator="erode" in="SourceGraphic" radius="3" />
</filter>
<filter id="Erode4">
<feMorphology operator="erode" in="SourceGraphic" radius="4" />
</filter>
<filter id="Dilate1">
<feMorphology operator="dilate" in="SourceGraphic" radius="1" />
</filter>
<filter id="Dilate3">
<feMorphology operator="dilate" in="SourceGraphic" radius="3" />
</filter>
<filter id="Dilate4">
<feMorphology operator="dilate" in="SourceGraphic" radius="4" />
</filter>
</defs>

<g enable-background="new" >
<g font-family="Verdana" font-size="50"
stroke="red" stroke-width="4">
<text x="50" y="60">Unfiltered</text>
<text x="50" y="120" filter="url(#Erode1)">Erode 1</text>
<text x="50" y="180" filter="url(#Erode3)">Erode 3</text>
<text x="50" y="240" filter="url(#Erode4)">Erode 4</text>
<text x="50" y="300" filter="url(#Dilate1)">Dilate 1</text>
<text x="50" y="360" filter="url(#Dilate3)">Dilate 3</text>
<text x="50" y="420" filter="url(#Dilate4)">Dilate 4</text>
</g>
</g>

</svg>

View example

SVG Reference Complete SVG Reference

From http://www.w3schools.com (Copyright Refsnes Data)