W3cubDocs

/SVG

<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

Categories Filter primitive element
Permitted content Any 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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
feMorphology Yes 12 4 Yes 9 ?
On HTML elements Yes 79 Yes No Yes ?
in Yes 12 4 Yes 9 ?
operator Yes 12 4 Yes 9 ?
radius Yes 12 4 Yes 9 ?
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
feMorphology Yes Yes 4 ? ? Yes
On HTML elements Yes Yes Yes ? ? Yes
in Yes Yes 4 ? ? Yes
operator Yes Yes 4 ? ? Yes
radius Yes Yes 4 ? ? Yes

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feMorphology