SVG Basic

SVG HOME
SVG Intro
SVG Example
SVG in HTML

SVG Shapes

SVG Rectangle
SVG Circle
SVG Ellipse
SVG Line
SVG Polygon
SVG Polyline
SVG Path
SVG Text
SVG Stroking

SVG Filters

SVG Filters Intro
SVG Blur Effects
SVG Drop Shadows

SVG Gradients

SVG Linear
SVG Radial

SVG Examples

SVG Reference

SVG feMorphology Element

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:

erode (thinning)
dilate (fattening)

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