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
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
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”.
- <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
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:
- <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
Output
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
Output
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
Thank you, keep learning and sharing.