Post
Ask Question

Scalable Vector Graphics - Filters 2

Introduction 

 
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
  1. <html>    
  2.     <body>    
  3.         <svg height="300" width="300">    
  4.             <defs>    
  5.                 <filter id="Blur" y="-5" height="40">    
  6.                     <feGaussianBlur in="SourceGraphic" stdDeviation="7" y="-"/>    
  7.                 </filter>    
  8.             </defs>    
  9.             <circle cx="80" cy="80" r="50"     
  10.            style="stroke: none; fill: red; " />    
  11.             <circle cx="210" cy="80" r="50"     
  12.            style="stroke: none; fill: red; filter: url(#Blur);" />    
  13.         </svg>    
  14.     </body>    
  15. </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:
  1. <html>    
  2.     <body>    
  3.         <svg height="300" width="700">    
  4.             <defs>    
  5.                 <filter id="Blur1" x="-20" y="-20" width="50" height="50">    
  6.                     <feGaussianBlur in="SourceGraphic" stdDeviation="0" />    
  7.                 </filter>    
  8.                 <filter id="Blur2" x="-20" y="-20" width="50" height="50">    
  9.                     <feGaussianBlur in="SourceGraphic" stdDeviation="3" />    
  10.                 </filter>    
  11.                 <filter id="Blur3" x="-20" y="-20" width="50" height="50">    
  12.                     <feGaussianBlur in="SourceGraphic" stdDeviation="7" />    
  13.                 </filter>    
  14.                 <filter id="Blur4" x="-20" y="-20" width="50" height="50">    
  15.                     <feGaussianBlur in="SourceGraphic" stdDeviation="12" />    
  16.                 </filter>    
  17.                 <filter id="Blur5" x="-20" y="-20" width="50" height="50">    
  18.                     <feGaussianBlur in="SourceGraphic" stdDeviation="20" />    
  19.                 </filter>    
  20.             </defs>    
  21.             <rect x="20" y="24" width="100" height="100"    
  22.       style="stroke: none; fill: #00fff0; filter: url(#Blur1);" />    
  23.             <rect x="150" y="24" width="100" height="100"    
  24.       style="stroke: none; fill: #00fff0; filter: url(#Blur2);" />    
  25.             <rect x="300" y="24" width="100" height="100"    
  26.       style="stroke: none; fill: #00fff0; filter: url(#Blur3);" />    
  27.             <rect x="450" y="24" width="100" height="100"    
  28.       style="stroke: none; fill: #00fff0; filter: url(#Blur4);" />    
  29.             <rect x="600" y="24" width="100" height="100"    
  30.       style="stroke: none; fill: #00fff0; filter: url(#Blur5);" />    
  31.         </svg>    
  32.     </body>    
  33. </html>       
Output 
 
Different Blur amounts
 
Example 3
 
Blur effects infilled and stroked graphics:
  1. <html>    
  2.     <body>    
  3.         <svg height="300" width="700">    
  4.             <defs>    
  5.                 <filter id="Blur1" y="-5" height="40">    
  6.                     <feGaussianBlur in="SourceGraphic" stdDeviation="7" y="-"/>    
  7.                 </filter>    
  8.             </defs>    
  9.             <circle cx="80" cy="80" r="50"     
  10.            style="stroke: none; fill: red; stroke: blue; stroke-width: 5" />    
  11.             <circle cx="220" cy="80" r="50"     
  12.            style="stroke: none; fill: red; stroke: blue; stroke-width: 5; filter: url(#Blur1);" />    
  13.         </svg>    
  14.     </body>    
  15. </html>      
Output
 
graphics
 
Rectangle
  1. <html>    
  2.     <body>    
  3.         <svg height="300" width="700">    
  4.             <defs>    
  5.                 <filter id="Blur1" x="0" y="0" height="50" width="50">    
  6.                     <feGaussianBlur in="SourceGraphic" stdDeviation="0" />    
  7.                 </filter>    
  8.                 <filter id="Blur2" x="0" y="0" height="50" width="50">    
  9.                     <feGaussianBlur in="SourceGraphic" stdDeviation="7" />    
  10.                 </filter>    
  11.             </defs>    
  12.             <rect x="20" y="20" width="100" height="100" stroke="green" stroke-width="13"    
  13.   fill="orange" filter="url(#Blur1)" />    
  14.             <rect x="150" y="20" width="100" height="100" stroke="green" stroke-width="13"    
  15.   fill="orange" filter="url(#Blur2)" />    
  16.         </svg>    
  17.     </body>    
  18. </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 of what happens in the blurring of the Alpha channel.
 
Example 4
  1. <html>    
  2.     <body>    
  3.         <svg height="300" width="700">    
  4.             <defs>    
  5.                 <filter id="Blur1" x="0" y="0" height="50" width="50">    
  6.                     <feGaussianBlur in="SourceGraphic" stdDeviation="0" />    
  7.                 </filter>    
  8.                 <filter id="Blur2" x="0" y="0" height="50" width="50">    
  9.                     <feGaussianBlur in="SourceAlpha" stdDeviation="7" />    
  10.                 </filter>    
  11.                 <filter id="Blur3" x="0" y="0" height="50" width="50">    
  12.                     <feGaussianBlur in="SourceGraphic" stdDeviation="0" />    
  13.                 </filter>    
  14.                 <filter id="Blur4" x="0" y="0" height="50" width="50">    
  15.                     <feGaussianBlur in="SourceAlpha" stdDeviation="10" />    
  16.                 </filter>    
  17.             </defs>    
  18.             <rect x="20" y="20" width="100" height="100" fill="lime" filter="url(#Blur1)" />    
  19.             <rect x="200" y="20" width="100" height="100" fill="lime" filter="url(#Blur2)" />    
  20.             <rect x="400" y="20" width="100" height="100" stroke="brown" stroke-width="13"    
  21.   fill="tomato" filter="url(#Blur3)" />    
  22.             <rect x="580" y="20" width="100" height="100" stroke="brown" stroke-width="13"    
  23.   fill="tomato" filter="url(#Blur4)" />    
  24.         </svg>    
  25.     </body>    
  26. </html>      
Output
 
Output
 
We can see that both the rectangles are defined by some of the other colors, 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. 
 

Summary

 
In this article, we learned about Scalable Vector Graphics - Filters 2. 
 
Thank you, keep learning and sharing. 


Similar Articles