Become an Image Processing Pro With SVG-4: Achieve text thinning or thickening effects using SVG instead of CSS

Introduction

Today, we continue learning about SVG filters by diving into practical examples.

Let’s check out the result first.

The slimming effect, in particular, is somewhat challenging to achieve on the web.

For thickening text, you can use the font-weight property to make the text bold or simulate the effect using the text-shadow property.

However, for text slimming, as far as I know, it can only be approximated using the CSS stroke property.

Using -webkit-text-stroke to slim down text requires a solid background color, limiting its use in certain scenarios.

However, the SVG method we’re about to cover doesn’t have this limitation, making it the best technique for text slimming.

How can text slimming be achieved?

The SVG feMorphology filter is used.

Here’s the detailed code example. First, add an <svg> element to the page containing only the SVG filter definition, as shown below:

<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="1" />
  </filter>
</svg>

<h4>erode</h4>
<data class="erode">CSS Master</data>
<h4>dilate</h4>
<data class="dilate">CSS Master</data>

data {
  font-size: 2.5rem;
}
.erode {
  filter: url(#erode);
}

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

Syntax and Purpose of the feMorphology Filter

The purpose of the SVG feMorphology filter is to erode or dilate the input graphic or shape, enabling effects such as text thickening or thinning.

It supports three attribute values, described as follows:

• in: Specifies the input image. It supports built-in keywords such as SourceGraphic, which refers to the element the filter is applied to. It can also be the result of another filter specified by the result attribute.
• operator: Determines the algorithm the filter uses. Supported values are erode and dilate. erode means “erode,” which makes text thinner, while dilate means “expand,” which makes text thicker.
• radius: Defines the size of the erosion or dilation effect.

Overall, it’s a fairly simple SVG filter.

Application on Image Resources

Image elements often have rich pixel colors. After applying dilation or erosion effects, interesting visual changes can appear.

For example, consider the following original image, which looks like this:

The results after applying the erode and dilate effects are shown below:

As you can see, the image with the erode effect applied appears darker.

On the other hand, the image with the dilate effect applied appears brighter and slightly blurred, almost dreamlike.

The most important thing is— the size of the image has also changed.

Visually, the image with the erode effect is smaller, while the image with the dilate effect is larger. The extent of the size change corresponds to the value set in the radius attribute.

When you encounter similar special effects, try experimenting with these techniques.