SVG Basic

SVG HOME
SVG Intro
SVG Example
SVG in HTML

SVG Shapes

SVG Rectangle
SVG Circle
SVG Ellipse
SVG Line
SVG Polygon
SVG Polyline
SVG Path
SVG Text
SVG Stroking

SVG Filters

SVG Filters Intro
SVG Blur Effects
SVG Drop Shadows

SVG Gradients

SVG Linear
SVG Radial

SVG Examples

SVG Reference

SVG Blur Effects

« Previous

Next Chapter »

Note: Internet Explorer and Safari do not support SVG filters yet!

<defs> and <filter>

All internet SVG filters are defined within a <defs> element. The <defs> element is short for definitions and contains definition of special elements (such as filters).

The <filter> element is used to define an SVG filter. The <filter> element has a required id attribute which identifies the filter. The graphic then points to the filter to use.

SVG <feGaussianBlur>

Example 1

The <feGaussianBlur> element is used to create blur effects:

Here is the SVG code:

Example

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

The id attribute of the <filter> element defines a unique name for the filter
The blur effect is defined with the <feGaussianBlur> element
The in="SourceGraphic" part defines that the effect is created for the entire element
The stdDeviation attribute defines the amount of the blur
The filter attribute of the <rect> element links the element to the "f1" filter