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