滤镜称得上是SVG最强大的功能了，它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效。这样你就很容易在客户端生成和修改图像了。而且滤镜并没有破坏原有文档的结构，所以维护性也很好。
滤镜用filter元素定义：需要使用的时候，在需要滤镜效果的图形或容器上添加filter属性，引用相关滤镜即可。
滤镜元素包含很多的滤镜原子操作；每个原子操作在传入的对象上执行一个基本的图形操作，并产生图形输出。大多数的原子操作生成的结果基本都是一个RGBA图片。每个原子操作的输入既可以是源图形，也可以使其他原子操作的结果。所以引用滤镜效果的过程就是在源图形上应用相关的滤镜原子操作，最后生成一个新的图形并渲染。
当在容器上(例如g元素)使用filter属性的时候，滤镜效果会应用到容器中的所有元素。但是容器中的元素并不会直接渲染到屏幕，而是会被暂时存储起来。然后，图形命令会被当做处理引用的filter元素的过程的一部分被执行，这个时候才会去渲染。这是通过使用SourceGraphic和SourceAlpha来指定的。下面的第二个例子中的第三种情况会演示这种效果。
有些滤镜效果会生成一些没有定义的像素点，这些点会被处理成透明效果。
先来看一个例子：
复制代码
代码如下:
xmlns="http://www.w3.org/2000/svg" version="1.1">
specularExp lighting-color="#bbbbbb"
result="specOut">
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
这个例子运行在FireFox上的效果是最后一幅图的结果：
注意：在其他的浏览器中可能会有一些不同。
这个滤镜使用了6个效果，依次是(单步效果图如上图所示：)：
feGaussianBlur：这一步是进行高斯模糊处理；该特效的输入是源图片的透明度值，输出存到了临时缓冲blur中。blur值作为了下面feOffset和feSpecularLighting的输入。
feOffset：这一步是把图片平移一些位置；该特效的输入是上一步中生成的blur，生成一个新的缓存offsetBlur。
feSpecularLighting：这一步是把图片的表面进行光线的处理。输入是第一步中生成的blur，输出存放到新的缓存specOut中。
两次feComposite：这两步是对不同的缓存层进行组合。
feMerge：这一步是合并不同的层。该步通常是最后的一步，融合各个缓存的层，生成最终的图片，并渲染呈现。虽然这一步也可以用多次feComposite特效完成，但是毕竟还是不太方便。
filter元素与滤镜效果区域
滤镜效果区域指的是滤镜效果起作用的区域。这个区域的大小是由filter元素下列的属性定义的：
filterUnits = "userSpaceOnUse | objectBoundingBox"
这个属性定义了x,y,width和height使用的坐标空间。与其他的Unit相关的属性一样，该属性也是两个值：userSpaceOnUse和objectBoundingBox(默认值)。
userSpaceOnUse表示使用引用该filter元素的元素的用户坐标系统。
objectBoundingBox表示使用引用该filter元素的元素的包围盒的百分比做取值范围。
x,y,width,height
这些属性定义了滤镜起作用的矩形区域。滤镜效果不会应用在超过这个区域的点上。x,y的默认值是-10%，width与height的默认值是120%。
filterRes
该属性定义了中间缓存区域的大小，所以也定义了缓存图片的质量。通常情况下，不需要提供这个值，浏览器自己会选取合适的值。通常，滤镜效果区域应该定义成和背景正好能点和点一一对应，这样会带来一定的效率优势。
除了这些属性，filter元素的下列属性也很重要：
primitiveUnits = "userSpaceOnUse | objectBoundingBox"
这个属性定义每个原子操作中坐标和长度使用的坐标空间，这个属性的取值还是userSpaceOnUse和objectBoundingBox。只不过默认值是userSpaceOnUse。