滤镜称得上是SVG最强大的功能了，它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效。这样你就很容易在客户端生成和修改图像了。而且滤镜并没有破坏原有文档的结构，所以维护性也很好。
滤镜用filter元素定义：需要使用的时候，在需要滤镜效果的图形或容器上添加filter属性，引用相关滤镜即可。
滤镜元素包含很多的滤镜原子操作；每个原子操作在传入的对象上执行一个基本的图形操作，并产生图形输出。大多数的原子操作生成的结果基本都是一个RGBA图片。每个原子操作的输入既可以是源图形，也可以使其他原子操作的结果。所以引用滤镜效果的过程就是在源图形上应用相关的滤镜原子操作，最后生成一个新的图形并渲染。
当在容器上(例如g元素)使用filter属性的时候，滤镜效果会应用到容器中的所有元素。但是容器中的元素并不会直接渲染到屏幕，而是会被暂时存储起来。然后，图形命令会被当做处理引用的filter元素的过程的一部分被执行，这个时候才会去渲染。这是通过使用SourceGraphic和SourceAlpha来指定的。下面的第二个例子中的第三种情况会演示这种效果。
有些滤镜效果会生成一些没有定义的像素点，这些点会被处理成透明效果。
先来看一个例子：
复制代码
<svg width=”7.5cm” height=”5cm” viewBox=”0 0 200 120″
xmlns=”http://www.w3.org/2000/svg” version=”1.1″>
<title>SVG 滤镜效果示例</title>
<desc>采用各种滤镜效果实现一副图形的3D的光照效果。</desc>
<defs>
<filter id=”MyFilter” filterUnits=”userSpaceOnUse” x=”0″ y=”0″ width=”200″ height=”120″>
<feGaussianBlur in=”SourceAlpha” stdDeviation=”4″ result=”blur”/>
<feOffset in=”blur” dx=”4″ dy=”4″ result=”offsetBlur”/>
<feSpecularLighting in=”blur” surfaceScale=”5″ specularConstant=”.75″
specularExponent=”20″ lighting-color=”#bbbbbb”
result=”specOut”>
<fePointLight x=”-5000″ y=”-10000″ z=”20000″/>
</feSpecularLighting>
<feComposite in=”specOut” in2=”SourceAlpha” operator=”in” result=”specOut”/>
<feComposite in=”SourceGraphic” in2=”specOut” operator=”arithmetic”
k1=”0″ k2=”1″ k3=”1″ k4=”0″ result=”litPaint”/>
<feMerge>
<feMergeNode in=”offsetBlur”/>
