svg element

<feMorphology>

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

Like other filter primitives, it handles color components in the linearRGB color space by default. You can use color-interpolation-filters to use sRGB instead.

Usage context

Attributes

in
operator
radius
Filter primitive attributes: x, y, width, height, result

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: "Helvetica", "Arial", sans-serif;
  font-size: 3em;
}

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

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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: "Helvetica", "Arial", sans-serif;
  font-size: 3em;
}

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

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.