feMorphology (SVG Filter Effect)

By mbystedt on Feb 27, 2014, 9:49:37 PM

The morphology filter effect operates on the form (hence the name) of an object. Its two operations either thins (erode) or expands (dilate) the source graphic by the desired amount. The source is often the alpha channel (which encodes the anti-aliasing).

Attribute	Values	Comments
operator	erode \| dilate	The first thins the in source and the second fattens. 'erode' is the default.
radius	>= 0	The amount to add or remove. Like changing the radius or a circle. 0 is the default.

See: Filter Effect Common Attributes

The "dilate" filter can be used to create an outside stroke. A second effect like a colour matrix can then create the desired colour for the outside stroke which is then merged with the source graphic. The example below shows how this is useful for text in particular as a normal stroke thins letters.

Example 1. Morphology filter versus stroke with text. (Download)

<filter id="morphology">
  <feMorphology in="SourceAlpha" result="morphed" operator="dilate" radius="2" />
  <feColorMatrix in="morphed" result="recolored" type="matrix" values="-1 0 0 1 0, 0 -1 0 1 0, 0 0 -1 1 0, 0 0 0 1 0"/>
  <feMerge>
    <feMergeNode in="recolored"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Code 1. The filter takes the source alpha channel and expands it. It's then recoloured and merged with the source.