<feMorphology>

The <feMorphology> SVG filter primitive is used to erode or dilate the input image. Its usefulness lies especially in fattening or thinning effects.

Usage context

CategoriesFilter primitive element
Permitted contentAny number of the following elements, in any order:
<animate>, <set>

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGFEMorphologyElement interface.

Examples

Filtering SVG content

SVG

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

CSS

text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
}

#thin {
  filter: url(#erode);
}

#thick {
  filter: url(#dilate);
}

Filtering HTML content

SVG

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

CSS

p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
}

#thin {
  filter: url(#erode);
}

#thick {
  filter: url(#dilate);
}

Specifications

Specification Status Comment
Filter Effects Module Level 1
The definition of '<feMorphology>' in that specification.
Working Draft No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<feMorphology>' in that specification.
Recommendation Initial definition

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
feMorphologyChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support YesOpera Full support 9Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
On HTML elementsChrome Full support YesEdge Full support 79Firefox Full support YesIE No support NoOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android Full support Yes
inChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support YesOpera Full support 9Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
operatorChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support YesOpera Full support 9Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
radiusChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support YesOpera Full support 9Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown

See also