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.

<feGaussianBlur/>

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.

See the Pen SVGfeGaussianBlurEllipseBefore by Daniel (@Parsons) on CodePen.

And now here is the same ellipse with a ‘<feGaussianBlur/>’ filter added.

See the Pen svgEllipseWithGaussianBlur by Daniel (@Parsons) on CodePen.

Lets try some more svg filters!

<feOffset/>

The ‘feOffset’ svg filter moves the original graphic on the xy plane.

See the Pen SVGfeoffSetFilterExample by Daniel (@Parsons) on CodePen.

<Blend/>

To see the original graphic with the offset can be achieved by using the svg ‘<Blend/>’ filter.

See the Pen SVGfeBlendFilterEllipse by Daniel (@Parsons) on CodePen.

And by changing the feOffset in attribute to ‘SourceAlpha’ a drop shadow can be made.

See the Pen SVGdropShadowFilters by Daniel (@Parsons) on CodePen.

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.

See the Pen SVGrectBeforeDropshadowFilters by Daniel (@Parsons) on CodePen.

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.

See the Pen svgRectOffsetBlend by Daniel (@Parsons) on CodePen.


Next on line 5 a ‘<feGaussianBlur/>’ is added to the svg.

See the Pen SVGoffSetBlendGaussianFilterRect by Daniel (@Parsons) on CodePen.

On line 4 the ‘in’ attribute for the ‘feOffset’ element is changed to ‘SourceAlpha’. This creates a black shadow.

See the Pen SVGSourceAlphaRectOffset by Daniel (@Parsons) on CodePen.

<feColorMatrix/>

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

See the Pen SVGrectDropShadowFilterMatrix by Daniel (@Parsons) on CodePen.

Another Technique

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.

See the Pen Drop shadow example by Daniel (@Parsons) on CodePen.

More on SVG (Scalable Vector Graphics)

SVG logo. Scalable Vector Graphic Filters

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *