Scalable Vector Graphics - Filters 4

Before reading further, read the following articles.

• Overview of Scalable Vector Graphics (SVG)
• Scalable Vector Graphics - Rectangle
• Scalable Vector Graphics - Circle
• Scalable Vector Graphics - Ellipse
• Scalable Vector Graphics - Line
• Scalable Vector Graphics - Polyline
• Scalable Vector Graphics - Polygon
• Scalable Vector Graphics - Path 1
• Scalable Vector Graphics - Path 2
• Scalable Vector Graphics - Path 3
• Scalable Vector Graphics - Text 1
• Scalable Vector Graphics - Text 2
• Scalable Vector Graphics - Filters 1
• Scalable Vector Graphics - Filters 2
• Scalable Vector Graphics - Filters 3

Now let’s proceed to understand the SVG blend filter.

Blend filter

The blend filter is used to blend input from multiple filters into one. In other words, the filter composites two or more objects together using commonly used imaging software blending modes. It does a pixel-wise combination of two images.

The tag <feBlend> is used here to blend the input along with its two important attributes “in2” and “mode”.

There are five modes of blending that are specified in blending process. If it’s not specified, then the effect is as if a value of “normal” is specified. The five modes are as in the following:

• Normal
• Multiply
• Screen
• Darken
• Lighten

The “in2” attribute is used for the second input image to the blending operation. This can take on the same value as the “in” attribute.

Let’s see examples for each mode.

Example 1: Normal mode

This example first offsets a rectangle and then blends the original on top of the offset image in normal mode.
Output



In the preceding example, we can see that there is a declaration of a filter that uses two filter effects. The first one is an offset effect and the second is a blend effect that takes two inputs (in and in2) and blends them into one.

Example 2: Multiply mode

Just change the mode in the code i.e. mode=”multiply”.

Output



Example 3: Screen mode

mode=”screen”

Output



Example 4: darken mode

mode=”darken”

Output



Example 5: lighten mode

mode=”lighten”

Output



In all the preceding modes, we can see that the center part is being affected by applying each mode when using only two filters.

Now let’s see a few more examples using three filters.

Example 6

Blurred offset image using a Gaussian blur effect.
Output



Output



Similarly we can check other modes also to see the effects.

Example 7

A colored shadow or offset image using a colorMatrix filter.

The <feColorMatrix> filter is used to transform the colors in the “offset image closer to black”.
Output



Output



Now let’s see how a shadow becomes Black by a Alpha channel.

Example 8

When we apply an offset filter on an Alpha channel:
Output



Output



Example 9

When we apply a blend filter on an Alpha channel:
Output



Output



The following are examples using four filters.

Example 10

Colored shadow by colorMatrix filter:
Output



Thank you, keep learning and sharing.