Scalable Vector Graphics - Filters 2

Gopi Chand
9y
5.2k
0
0
100
Article

Before reading further, read the following articles.

Now let's proceed to understand the Blur SVG filters.

SVG Blur effect

The SVG blur effect can achieve on any SVG shape or graphics using “Gaussian Blur SVG filter” and it is represented by the <feGaussianBlur> tag. As we know, all SVG filters are defined within a <defs> tag, short for definitions, and contains the definition of special tags like filters.

Here is an example to show the simple blur effect.

Example 1

<html>
<body>
<svg height="300" width="300">
<defs>
<filter id="Blur" y="-5" height="40">
<feGaussianBlur in="SourceGraphic" stdDeviation="7" y="-"/>
</filter>
</defs>
<circle cx="80" cy="80" r="50"
style="stroke: none; fill: red; " />
<circle cx="210" cy="80" r="50"
style="stroke: none; fill: red; filter: url(#Blur);" />
</svg>
</body>
</html>

Output

SVG Blur effect

To clearly understand which part of code is doing what, let's explore it.

The id attribute of the <filter> tag defines a unique name for the filter.
The <feGaussianBlur> tag defines the blur effect.
The in=”SourceGraphics” is used to define the effect on the entire element.
The stdDeviation attribute defines the amount of the blur effect. The “s” is the standard deviation in the x direction and “t” is the standard deviation in the y direction. The value of stdDeviation can be one or two numbers. If one value is provided then that value will be used for both x & y and if two values are provided then one represents the x direction and the other represents the y direction.
The filter attribute of the <circle> tag links the element to the “Blur” filter.

Example 2

Various Blur amounts:

<html>
<body>
<svg height="300" width="700">
<defs>
<filter id="Blur1" x="-20" y="-20" width="50" height="50">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>
<filter id="Blur2" x="-20" y="-20" width="50" height="50">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<filter id="Blur3" x="-20" y="-20" width="50" height="50">
<feGaussianBlur in="SourceGraphic" stdDeviation="7" />
</filter>
<filter id="Blur4" x="-20" y="-20" width="50" height="50">
<feGaussianBlur in="SourceGraphic" stdDeviation="12" />
</filter>
<filter id="Blur5" x="-20" y="-20" width="50" height="50">
<feGaussianBlur in="SourceGraphic" stdDeviation="20" />
</filter>
</defs>
<rect x="20" y="24" width="100" height="100"
style="stroke: none; fill: #00fff0; filter: url(#Blur1);" />
<rect x="150" y="24" width="100" height="100"
style="stroke: none; fill: #00fff0; filter: url(#Blur2);" />
<rect x="300" y="24" width="100" height="100"
style="stroke: none; fill: #00fff0; filter: url(#Blur3);" />
<rect x="450" y="24" width="100" height="100"
style="stroke: none; fill: #00fff0; filter: url(#Blur4);" />
<rect x="600" y="24" width="100" height="100"
style="stroke: none; fill: #00fff0; filter: url(#Blur5);" />
</svg>
</body>
</html>

Output

Different Blur amounts

Example 3

Blur effects in filled and stroked graphics:

<html>
<body>
<svg height="300" width="700">
<defs>
<filter id="Blur1" y="-5" height="40">
<feGaussianBlur in="SourceGraphic" stdDeviation="7" y="-"/>
</filter>
</defs>
<circle cx="80" cy="80" r="50"
style="stroke: none; fill: red; stroke: blue; stroke-width: 5" />
<circle cx="220" cy="80" r="50"
style="stroke: none; fill: red; stroke: blue; stroke-width: 5; filter: url(#Blur1);" />
</svg>
</body>
</html>

Output

graphics

Rectangle

<html>
<body>
<svg height="300" width="700">
<defs>
<filter id="Blur1" x="0" y="0" height="50" width="50">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>
<filter id="Blur2" x="0" y="0" height="50" width="50">
<feGaussianBlur in="SourceGraphic" stdDeviation="7" />
</filter>
</defs>
<rect x="20" y="20" width="100" height="100" stroke="green" stroke-width="13"
fill="orange" filter="url(#Blur1)" />
<rect x="150" y="20" width="100" height="100" stroke="green" stroke-width="13"
fill="orange" filter="url(#Blur2)" />
</svg>
</body>
</html>

Output

Rectangle

Blurring Alpha channel

Generally we use “in=SourceGraphics” as input as used in the preceding examples. That means that the RGB colors are used as input for the filter. But we can use “in=SourceAlpha” as input for blurring the Alpha channel. Let's see using an example what happens on the blurring of the Alpha channel.

Example 4

<html>
<body>
<svg height="300" width="700">
<defs>
<filter id="Blur1" x="0" y="0" height="50" width="50">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>
<filter id="Blur2" x="0" y="0" height="50" width="50">
<feGaussianBlur in="SourceAlpha" stdDeviation="7" />
</filter>
<filter id="Blur3" x="0" y="0" height="50" width="50">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>
<filter id="Blur4" x="0" y="0" height="50" width="50">
<feGaussianBlur in="SourceAlpha" stdDeviation="10" />
</filter>
</defs>
<rect x="20" y="20" width="100" height="100" fill="lime" filter="url(#Blur1)" />
<rect x="200" y="20" width="100" height="100" fill="lime" filter="url(#Blur2)" />
<rect x="400" y="20" width="100" height="100" stroke="brown" stroke-width="13"
fill="tomato" filter="url(#Blur3)" />
<rect x="580" y="20" width="100" height="100" stroke="brown" stroke-width="13"
fill="tomato" filter="url(#Blur4)" />
</svg>
</body>
</html>

Output

Output

We can see that both the rectangles are defined by some or the other color, but the output is Black and White and this happened due to the application of the Gaussian blur filter to the Alpha channel.

Want to learn more.

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