SVG feMorphology Radius Attribute Visual Changes
The feMorphology SVG filter primitive alters the
boundaries of shapes, text, and graphics by either expanding or
shrinking them. The radius attribute directly controls the
extent of this transformation, determining the pixel distance by which
edges are altered. Depending on whether the filter is set to dilute or
erode an element, adjusting the radius results in dramatic visual
transformations ranging from subtle weight adjustments and bolding to
complete dissolution or merging of shapes.
Understanding the Radius Attribute
The radius attribute defines the size of the structuring
element used to perform the morphological operation. It accepts either a
single number or two space-separated numbers:
- Single value (e.g.,
radius="3"): Applies the morphological transformation uniformly along both the X and Y axes. - Two values (e.g.,
radius="4 1"): Applies the first value to the horizontal (X) axis and the second value to the vertical (Y) axis, allowing for directional morphing.
The visual outcome of changing the radius depends entirely on the
operator attribute: dilate or
erode.
Visual Changes with
Dilate (operator="dilate")
When the operator is set to dilate, increasing the
radius value causes the graphic to expand outward,
thickening its visual footprint.
- Thickening and Bolding: Increasing the radius makes thin lines, outlines, and text appear significantly bolder. Fine details become heavy and pronounced.
- Closing Gaps and Merging: Holes, internal cutouts, and small spaces between adjacent elements shrink and eventually disappear as the expanding edges overlap and fuse together.
- Corner Rounding and Softening: Sharp internal corners fill in, while sharp external corners can become blocky or slightly blunted depending on the pixel grid.
- Loss of Internal Detail: As the radius reaches higher values, the graphic loses internal structure, turning complex illustrations or text into solid silhouette blobs.
Visual Changes with
Erode (operator="erode")
When the operator is set to erode, increasing the
radius value eats away at the edges of the graphic,
shrinking its visual footprint.
- Thinning and Lightening: Elements become visibly thinner. Bold typography and thick strokes reduce in visual weight, creating a delicate, hairline appearance.
- Disconnection and Fragmentation: Narrow connection points in paths break apart. Continuous lines or joined letters separate into disjointed fragments.
- Loss of Fine Details: Small elements, thin strokes, and intricate details that are narrower than the radius value disappear entirely.
- Complete Vanishing: If the radius exceeds half the thickness of the element at its widest point, the element completely vanishes from the rendered output.
Directional Morphing via Asymmetrical Radius
When two distinct values are provided to the radius
attribute, the visual changes become asymmetrical:
- Horizontal Bias (e.g.,
radius="6 0"): Dilating expands the shape solely to the left and right, creating a motion-blur or horizontal smear effect. Eroding narrows vertical strokes while leaving horizontal strokes untouched. - Vertical Bias (e.g.,
radius="0 6"): Dilating stretches the graphic upward and downward. Eroding cuts away horizontal lines while leaving vertical structures intact, often turning letterforms into vertical parallel bars.