Along with masks, filters are other powerful modifiers that can be applied to elements in order to obtain various effects, such as blur, grayscale, and many more. Of course, there are drawbacks; at the time of writing, filters support is inhomogeneous. The following are some of the drawbacks:
IE9 supports some effects using the well-known
progidfiltersFirefox supports filters if declared within an SVG fragment
Chrome, Safari, and other WebKit-based browsers support the last CSS filter specification
IE10 has not yet confirmed support for these properties, plus it will drop support for
progidfilters
So, let's implement the blur filter trying to keep the support as wide as possible. First, we'll handle WebKit, which is very easy:
-webkit-filter: blur(3px);
The parameter passed to the
blur function is the pixel radius of the effect. Next comes Gecko support; for this we have to use the
feGaussianBlur element within a properly done SVG file, named svg/filters.svg:
<?xml version="1.0...