Scalable Vector Graphics - Filters 4

Gopi Chand
8y
6.3k
0
1

Article

Before reading further, read the following articles.

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.

<html>
<body>
<svg width="500" height="300">
<filter id = "Blend" width = "150%" height = "150%">
<feOffset result = "offOut" in = "SourceGraphic" dx = "20" dy = "20"/>
<feBlend in = "SourceGraphic" in2 = "offOut" mode = "normal"/>
</filter>
<g stroke-width = "3" filter = "url(#Blend)">
<rect x = "30" y = "30" width = "50" height = "80" stroke = "green" fill = "tomato"/>
<rect x = "120" y = "30" width = "70" height = "100" stroke = "blue" fill = "lightgreen"/>
<rect x = "230" y = "30" width = "90" height = "130" stroke = "red" fill = "lightgrey"/>
</g>
</svg>
</body>
</html>

Output

Normal mode

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.

<html>
<body>
<svg width="500" height="300">
<filter id = "Blend" width = "150%" height = "150%">
<feOffset result = "offOut" in = "SourceGraphic" dx = "20" dy = "20"/>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal"/>
</filter>
<g stroke-width = "5" filter = "url(#Blend)">
<rect x = "30" y = "30" width = "80" height = "80" fill = "blue"/>
<rect x = "150" y = "30" width = "80" height = "80" stroke = "red" fill = "yellow"/>
<rect x = "270" y = "30" width = "80" height = "80" stroke = "green" stroke-dasharray = "10 3" fill = "pink"/>
</g>
</svg>
</body>
</html>

Output

Gaussian blur effect normal

Output

Gaussian blur effect screen

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”.

<html>
<body>
<svg width="500" height="300">
<filter id = "Blend" width = "150%" height = "150%">
<feOffset result = "offOut" in = "SourceGraphic" dx = "20" dy = "20"/>
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feBlend in = "SourceGraphic" in2 = "matrixOut" mode = "normal"/>
</filter>
<g stroke-width = "3" filter = "url(#Blend)">
<rect x = "30" y = "30" width = "80" height = "80" fill = "red"/>
<rect x = "150" y = "30" width = "80" height = "80" stroke = "blue" fill = "cyan"/>
<rect x = "270" y = "30" width = "80" height = "80" stroke = "red" stroke-dasharray = "10 3" fill = "yellow"/>
</g>
</svg>
</body>
</html>

Output

colorMatrix filter normal

Output

colorMatrix filter multiply

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:

<html>
<body>
<svg width="500" height="300">
<filter id = "Blend" width = "150%" height = "150%">
<feOffset result = "offOut" in = "SourceAlpha" dx = "20" dy = "20"/>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in = "SourceGraphic" in2 = "blurOut" mode = "darken"/>
</filter>
<g stroke-width = "5" filter = "url(#Blend)">
<rect x = "30" y = "30" width = "80" height = "80" fill = "orange"/>
<rect x = "150" y = "30" width = "80" height = "80" stroke = "blue" fill = "wheat"/>
<rect x = "270" y = "30" width = "80" height = "80" stroke = "green" stroke-dasharray = "10 3" fill = "cyan"/>
</g>
</svg>
</body>
</html>

Output

apply offset filter normal

Output

apply offset filter darken

Example 9

When we apply a blend filter on an Alpha channel:

<html>
<body>
<svg width="500" height="300">
<filter id = "Blend" width = "150%" height = "150%">
<feOffset result = "offOut" in = "SourceGraphics" dx = "20" dy = "20"/>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in = "SourceAlpha" in2 = "blurOut" mode = "normal"/>
</filter>
<g stroke-width = "5" filter = "url(#Blend)">
<rect x = "30" y = "30" width = "80" height = "80" fill = "red"/>
<rect x = "150" y = "30" width = "80" height = "80" stroke = "blue" fill = "forestgreen"/>
<rect x = "270" y = "30" width = "80" height = "80" stroke = "green" stroke-dasharray = "10 3" fill = "yellow"/>
</g>
</svg>
</body>
</html>

Output

apply blend filter normal

Output

apply blend filter lighten

The following are examples using four filters.

Example 10

Colored shadow by colorMatrix filter:

<html>
<body>
<svg width="500" height="300">
<filter id = "Blend" width = "150%" height = "150%">
<feOffset result = "offOut" in = "SourceGraphic" dx = "20" dy = "20"/>
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal"/>
</filter>
<g stroke-width = "3" filter = "url(#Blend)">
<rect x = "30" y = "30" width = "80" height = "80" fill = "lime"/>
<rect x = "150" y = "30" width = "80" height = "80" stroke = "blue" fill = "tomato"/>
<rect x = "270" y = "30" width = "80" height = "80" stroke = "green" stroke-dasharray = "10 3" fill = "cyan"/>
</g>
</svg>
</body>
</html>

Output

colorMatrix filter

Thank you, keep learning and sharing.

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all