Scalable Vector Graphic Filters are used to create blurring, sharpening, or color shifting effects to svg elements. There are many svg filters that create amazing effects. This post will introduce some through simple to understand examples.
The first example uses the ‘feGaussianBlur’ element to create a blur effect.
The <feGaussianBlur/> filter will be used on an ‘svg ellipse’ element.
First of all here is a basic ‘svg ellipse’ element.
And now here is the same ellipse with a ‘<feGaussianBlur/>’ filter added.
Lets try some more svg filters!
The ‘feOffset’ svg filter moves the original graphic on the xy plane.
To see the original graphic with the offset can be achieved by using the svg ‘<Blend/>’ filter.
And by changing the feOffset in attribute to ‘SourceAlpha’ a drop shadow can be made.
Scalable Vector Graphic Filters – Drop Shadow
Next a ‘rect’ element is used with some svg filters to create a drop shadow effect.
First of all here is a svg ‘rect’ element with some styles.
Now inside the ‘filter’ and ‘defs’ tags a ‘<feOffset/>’ and ‘<Blend/>’ is added to the svg. A filter attribute with a url is added to the ‘rect’ element.
Next on line 5 a ‘<feGaussianBlur/>’ is added to the svg.
On line 4 the ‘in’ attribute for the ‘feOffset’ element is changed to ‘SourceAlpha’. This creates a black shadow.
And finally by adding a ‘feColorMatrix’ filter to the svg a shadow color can be transformed closer to black. The ‘0.2’ value in the ‘value’ attribute of the <feColorMatrix/> filter. Try changing increasing and decreasing each of the three ‘0.2’ values to see the effect. The first ‘0.2’ value is the red, the second is the green and the third is the blue. Also the ‘in’ attribute for the ‘feOffset’ element is changed back to ‘SourceGraphic’.
Here is another method of creating a drop shadow courtesy of the ‘Mozilla Development Network‘. The example incorporates the ‘<feGaussianBlur/>’ and ‘<feOffset/>’ elements with a ‘<feMerge/>’ element containing two ‘<feMergeNode/>’ elements.