1. Technology

How to Use Gaussian Blur in SVG

SVG Gaussian Blur Tutorial


Gaussian blur is a filter you often see in graphic design. Essentially, a Gaussian blur smooths out the rough edges and reduces the detail to the point that the image takes on a hazy look. Scalable vector graphics (SVG) allows you to create shapes using an XML format. You give instructions to the parser that describe step-by-step how to form the image. Filters are an advanced function in SVG and Gaussian blur is one of the easier filters. It requires just two attributes, in and stdDeviation.

feGaussianBlur Element

When defining a filter, you must begin with the defs element to alert the parser that you are creating a named function.


Next add the filter element to explain what you are doing and supply a title for your function.

<filter id="myGaussianBlur">

The feGaussianBlur tag and the attributes are next in line.

<feGaussianBlur in="SourceGraphic" stdDeviation="4" />

The in attribute defines the space you wish to apply to filter. In the sample code, this would be the entire shape. Other options would include SourceAlpha or BackgroundImage.

Attribute 'stdDeviation' determines the depth of the blur. The higher the number, the more the image blurs. This attribute you will probably need to play around with until you get the look you want for the filter.

As with all things XML, add the declaration statement, namespace information and close your tags. After creating the filter, add your shape instructions.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

<svg width="100%" height="100%" version="1.0"

<filter id="myGaussianBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" />

<ellipse cx="100" cy="50" rx="30" ry="10"

The filter:url(#myGaussianBlur) attribute links the named function under defs to the shape.

©2014 About.com. All rights reserved.