Sams Teach Yourself SVG in 24 Hours

Blurring Images with feGaussianBlur

Blurring an object has a variety of uses. Perhaps you are trying to distort a group of objects so that a remaining object draws more attention. Perhaps you are trying to create a drop shadow. Or maybe you just don't want harsh, graphic shapes and lines in a certain instance. In any case, the blur effect is designed to make objects look “cloudy.”

The feGaussianBlur primitive uses one primary attribute—stdDeviation. (As loaded as this attribute name is, it's only short for “standard deviation.”) This attribute's value determines the degree of the blur; the higher the number, the more the object is blurred. Thus, your code for a feGaussianBlur will generally appear as follows, where x represents a value defining ...