SVG Gaussian Blur

SVG filters must be defined within the <defs> tag.

Gaussian Blur (Gaussian Blur)

The <filter> tag is used to define SVG filters. The <filter> tag uses the required id attribute to define which filter to apply to the graphics?

The <filter> tag must be nested within the <defs> tag. The <defs> tag is an abbreviation for definitions and allows for the definition of special elements such as filters.

Please copy the following code into a notepad, then save the file as "filter1.svg". Place this file in your web directory:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"
</svg>

Code Explanation:

  • The id attribute of the <filter> tag can define a unique name for the filter (the same filter can be used by multiple elements in the document)
  • The filter:url attribute is used to link the element to the filter. When linking to a filter id, the # character must be used
  • Filter effects are defined through the <feGaussianBlur> tag. The fe prefix can be used for all filters
  • The stdDeviation attribute of the <feGaussianBlur> tag can define the degree of blurring
  • The part of "in="SourceGraphic" defines the effect created by the entire image

View Examples

Another example with a different stdDeviation value

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"
</svg>

View Examples