SVG滤镜用于为SVG图像添加漂亮的效果。例如，阴影，模糊或者高光。

筛选器范例

这是一个简单的SVG过滤器示例，其中显示了两个椭圆。显示的左椭圆形没有过滤器。严格的椭圆使用高斯模糊滤镜进行渲染：

<defs>
      <filter id="blurFilter" y="-5" height="40"
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" y="-"/>
      </filter>
  </defs>
    
  <ellipse cx="55" cy="60" rx="25" ry="15"
           style="stroke: none; fill: #0000ff; " />

  <ellipse cx="155" cy="60" rx="25" ry="15"
           style="stroke: none; fill: #0000ff; filter: url(#blurFilter);" />

注意右椭圆的边缘是如何模糊的。

过滤器输入和输出

SVG滤镜需要一些输入(源)，并对其应用滤镜效果。过滤器的输入可以是形状的图形(表示RGB颜色)，形状的alpha通道，也可以是其他过滤器的输出。

SVG过滤器从输入产生图形输出(结果)。此输出通常显示，而不是应用滤镜的形状。滤波器的输出可用作另一个滤波器的输入。因此，可以链接过滤器。

SVG过滤器的输入通常在过滤器元素的in属性中指定。这是一个例子：

<feGaussianBlur stdDeviation="3" in="SourceGraphic" />

如果将SVG过滤器的输出用作另一个过滤器的输入，则需要向过滤器元素添加一个`result'属性。这是一个例子：

<feGaussianBlur stdDeviation="3"
    in="SourceGraphic" result="blur"/>

现在，另一个SVG过滤器可以通过将值" blur"放入其" in"属性中来使用该过滤器的输出。在上面的示例中，值" blur"是在过滤器的"结果"属性中指定的。

过滤器尺寸

过滤器的尺寸是通过其x，y，width和height属性设置的。

" x"和" y"属性相对于用作输入的形状的" x"和" y"进行解释。由于某些滤镜的输出通常会比输入的尺寸大(例如，在形状周围添加模糊)，因此我们经常需要对x和y使用负数，以免切断滤镜添加的图形。

width和height属性同样简单明了。同样，有时可能必须指定一个宽度和高度，该宽度和高度应大于输入形状，以避免截断滤镜添加的效果。

组合过滤器

我们可以使用 <feMerge>元素组合过滤器。这是一个例子：

<defs>
    <filter id="blurFilter2" y="-10" height="40" x="-10" width="150">
        <feOffset in="SourceAlpha" dx="3" dy="3" result="offset2" />
        <feGaussianBlur in="offset2" stdDeviation="3"  result="blur2"/>

        <feMerge>
            <feMergeNode in="blur2" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
</defs>

<ellipse cx="55" cy="60" rx="25" ry="15"
         style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);" />

本示例创建一个包含两个过滤器元素的SVG过滤器：<feOffset>和<feGaussianBlur>。偏移滤镜效果可在应用其形状的Alpha通道上使用。高斯模糊适用于偏移滤镜效果的输出。

<feMerge>元素将模糊滤镜的输出与原始图形结合在一起。输入将按照它们出现在<feMerge>元素中的顺序进行组合。因此，较晚的输入显示在较早的输入的顶部。结果是形状看起来像带有阴影的图像。

高斯模糊滤镜

高斯模糊SVG滤波器可以使SVG形状模糊。高斯模糊滤镜由<feGaussianBlur>元素表示。这是一个例子：

<defs>
    <filter id="blurFilter4" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
</defs>
<rect x="20" y="20" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);" />

这个例子定义了一个<filter>，里面有一个<feGaussianblur>。然后，该示例定义了一个绿色矩形，该矩形从其CSS的filter属性中引用了过滤器。

模糊大小

<feGaussianBlur>元素的stdDeviation属性决定了滤镜所应用形状的模糊程度。数字越大，形状越模糊。这是三个带有stdDeviation属性不同值的示例：

<defs>
    <filter id="blurFilter5" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <filter id="blurFilter6" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceGraphic" stdDeviation="6" />
    </filter>
    <filter id="blurFilter7" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceGraphic" stdDeviation="12" />
    </filter>
</defs>

<rect x="20" y="24" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);" />
<rect x="150" y="24" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter6);" />
<rect x="300" y="24" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter7);" />

请注意，应用于矩形的滤镜的stdDeviation属性中的值越高，矩形变得越来越模糊。

模糊Alpha通道

上面的示例使用" SourceGraphic"作为输入，这意味着将形状的RGB颜色用作过滤器的输入。通过在<feGaussianBlur>元素的in属性中设置值SourceAlpha，可以将形状的Alpha通道用作输入。这是一个例子：

<defs>
    <filter id="blurFilter8" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceAlpha" stdDeviation="10" />
    </filter>
</defs>
<rect x="20" y="20" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter8);" />

注意，即使用绿色填充定义了矩形，过滤器的输出也是黑色和白色。当高斯模糊滤镜应用于Alpha通道而不是图形(RGB)通道时，就会发生这种情况。

偏移滤镜

偏移滤波器获取输入，并将输入移动到其输出中。也就是说，它可以向上，向下，向左或者向右移动形状。因此，除了在过滤器中完成之外，它的工作方式类似于翻译转换。这是一个例子：

<defs>
    <filter id="offsetFilter1" x="-20" y="-20" width="200" height="200">
        <feOffset in="SourceGraphic" dx="80" dy="20" />
    </filter>
</defs>
<rect x="20" y="20" width="90" height="90"
      style="stroke: #000000; fill: none; filter: url(#offsetFilter1);" />
<rect x="20" y="20" width="90" height="90"
      style="stroke: #000000; fill: none; " />

本示例在完全相同的位置定义了两个矩形。矩形之一应用了偏移滤镜，该滤镜将其向下和向右移动。

偏移滤波器似乎也对形状有其他影响(某种模糊)，但我不确定为什么会这样。我至今无法找到任何关于为什么发生这种情况的解释。

颜色矩阵滤镜

颜色矩阵滤镜可用于将矩阵变换应用于形状的颜色。这是一个例子：

<defs>
    <filter id="colorMatrixFilter1" x="-20" y="-20" width="200" height="200">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 1 0
                        0 0 0 1 0
                        0 0 0 1 0
                        0 0 0 1 0
                "/>
    </filter>
</defs>
<rect x="20" y="20" width="90" height="90"
      style="stroke: none; fill: #0000ff; filter: url(#colorMatrixFilter1);" />

矩阵的值在<feColorMatrix>元素的values属性内提供。总共必须有4 x 5 = 20个值。这些值将应用于原始形状的颜色，如下所示：

0 0 0 red   0
 0 0 0 green 0
 0 0 0 blue  0
 0 0 0 1     0

注意：在Chrome和Firefox中，使用颜色矩阵滤镜得到的结果有些奇怪。上面的矩形是用填充色指定的，但是一旦颜色矩阵滤镜完成其工作，就只剩下轮廓线了。

混合滤镜

混合过滤器可以将来自多个过滤器的输入混合为一个。这是一个例子：

<svg width="500" height="100">
  <defs>
    <filter id="blurFilter3" y="-10" height="40" x="-10" width="150">
      <feOffset in="SourceAlpha" dx="3" dy="3" result="offset3" />
      <feGaussianBlur in="offset3" stdDeviation="3"  result="blur3"/>

      <feBlend  in="SourceGraphic" in2="blur3" x="-10" width="160"/>

    </filter>
  </defs>

  <ellipse cx="55" cy="60" rx="25" ry="15"
         style="stroke: none; fill: #0000ff;
                filter: url(#blurFilter3);" />

</svg>

本示例声明一个使用3种滤镜效果的滤镜。前两个是已链接的偏移量和高斯模糊效果。第三个是" <feBlend>"效果，它接受两个输入(" in"和" in2")并将它们混合为一个。

所产生的效果与本文前面所述的组合过滤器所获得的效果非常相似。