SVG Gaussian Blur

An SVG Filter must be defined within a <defs> tag.

Gaussian Blur

The <filter> tag is used to define an SVG filter. The <filter> tag has a required id attribute which identifies which filter will be applied to the graphic.

The <filter> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as filter.

Copy the following code into Notepad and save the file as "filter1.svg". Place the 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 defines a unique name for the filter (the same filter can be used by many elements in the document)
• The filter:url(#Gaussian_Blur) property is used to link an element to a filter. The # character must be used when linking to the filters id
• The filter effect is defined with the <feGaussianBlur> tag. The fe prefix is used for all filters
• The stdDeviation attribute of the <feGaussianBlur> tag defines the amount of the blur
• The in="SourceGraphic" part defines that the effect is created from the whole image

View example

Another example with a different stdDeviation:

<?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 example

Altova® XMLSpy® - The world's best-selling XML editor!

Whether you're new to XML or already an advanced user, the user-friendly views and powerful entry helpers, wizards, and debuggers in XMLSpy are designed to meet your XML and Web services development needs from start to finish.

• XML editor
• Graphical XML Schema / DTD editors
• XSLT 1.0/2.0 editor, debugger, profiler
• XQuery editor, debugger, profiler
• Support for Office Open XML (OOXML)
• Graphical WSDL editor & SOAP debugger
• Java, C#, C++ code generation
• And much more!

Download a free 30-day trial today!

Click to see a demo!

Learn what’s new in v2008

Get Your Diploma! W3Schools' Online Certification Program is the perfect solution for busy professionals who need to balance work, family, and career building. The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS. The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2008 by Refsnes Data. All Rights Reserved.

W3Schools was converted to XHTML in December 1999