SVG <filter> Filter

The SVG <filter> element is used to add beautiful effects to SVG images. For example, shadows, blurs, or highlights.

Filter Example

This is a simple SVG filter example, which shows two ellipses. The left ellipse does not use the filter, and the right ellipse is rendered with a Gaussian blur filter:

<svg　width="500"　height="100">
<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>

Image effect after running:

Note how the edge of the right ellipse is blurred.

Filter input and output

SVG filters require some input (source) and apply filter effects to it. The input can be the shape's graphics (representing RGB color), the shape's alpha channel, or the output of other filters.

SVG filters produce graphic output (result) from input. This output is usually displayed, rather than the shape to which the filter is applied. The output of the filter can be used as the input for another filter. Therefore, filters can be linked.

This is a diagram of SVG filter input and output:

The input of an SVG filter is usually specified in the attribute of the in filter element. Here is an example:

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

If you want to use the output of an SVG filter as the input for another filter, you need to add an attribute to the result filter element. Here is an example:

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

Now, another SVG filter can use the output of this filter by placing the value blur in its in attribute. In the above example, the value blur is specified in the result attribute of the filter.

Filter size

The size of a filter is set using its x, y, width, and height attributes.

The x and y attributes are interpreted relative to the x and y of the shape used as input. Since the output of some filters is usually larger than the input (for example, adding blur around the shape), negative numbers are usually used for x and y to avoid cutting off the graphics added by the filter.

The width and height attributes are also simple. Similarly, sometimes it may be necessary to specify a width and height that is greater than the input shape to avoid truncating the effect added by the filter.

combined filters

You can useElement combination filter. Here is an example:

<svg　width="500"　height="100">
<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="blur"2"　/>
　　　　　　　　　　　　<feMergeNode in="SourceGraphic"　/>
　　　　　　　　</feMerge>
　　　　</filter>
</defs>
<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);"　/>　
</svg>

This example creates an SVG filter containing two filter elements: <feOffset> and <feGaussianBlur>. The offset filter effect (feOffset) acts on the alpha channel of the shape it is applied to. The Gaussian blur (feGaussianBlur) acts on the output of the offset filter effect.

The <feMerge> element combines the output of the blurred filter with the original graphics. The inputs are combined in the order they appear in the <feMerge> element. Therefore, the input at the end is displayed on top of the input at the beginning. The result is that the shape of the image looks like it has a shadow. The image effect after running is:

Gaussian blur filter

The Gaussian blur SVG filter can blur SVG shapes. The Gaussian blur filter is composed ofelement represents. Here is an example:

<svg　width="500"　height="250">
<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);"　/>
</svg>

This example defines a <filter> with an <feGaussianblur> inside. Then, the example defines a green rectangle that references the filter from its CSS filter property. Here is the generated image:

Blur Size

The stdDeviation attribute of the <feGaussianBlur> element determines how much blur will be applied to the shape by the filter. The larger the number, the more blurred the shape becomes. Here are three examples with different values of stdDeumation attributes:

<svg　width="500"　height="250">
<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);"　/>
</svg>

Image effect after running:

Please note how the rectangle becomes increasingly blurred as the value of the stdDeumation attribute of the filter applied to them increases.

Blur Alpha Channel

The above example uses SourceGraphic as the input, which means the RGB color of the shape is used as the input for the filter. You can instead use the Alpha channel of the shape as the input by setting the value SourceAlpha on the in attribute of the <feGaussianBlur> element. Here is an example:

<svg　width="500"　height="250">
<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);"　/>　
</svg>

Image effect after running:

Note that even if a rectangle is defined with green fill, the output of the filter is black and white. This happens when the Gaussian blur filter is applied to the Alpha channel instead of the graphic (RGB) channel.

Offset Filter

The offset filter accepts an input and moves it in the output. In other words, it can move shapes up, down, left, or right. Therefore, it works in a similar way to transformation, but it is completed within the filter. Here is an example:

<svg　width="500"　height="250">
<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;　"　/>
</svg>

This example defines two rectangles at exactly the same position. One of the rectangles applies the offset filter, which moves it down and to the right.

Image effect after running.

The offset filter seems to also have other effects on shapes (some blurring), but I'm not sure why. I have not been able to find any explanation for why this happens.

Color Matrix Filter

The color matrix filter can be used to apply matrix transformations to the color of shapes. Here is an example:

<svg　width="500"　height="250">
<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);"　/>
</svg>

The values of the matrix are provided in the values attribute of the <feColorMatrix> element. There must be a total of4 x 5=20 values. These values will be applied to the color of the original shape as shown below:

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

Image effect after running:

Note: The results of the color matrix filter in Chrome and Firefox are somewhat strange. The above rectangle is specified with a fill color, but once the color matrix filter has completed its work, only the outline remains.

Blend Filter

A blend filter can mix the inputs from multiple filters into one. Here is an example:

<svg　width="500"　height="250">
　　<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>

This example declares a filter using3a filter that applies a variety of filter effects. The first two are the linked offset and Gaussian blur effects. The third isIt requires two inputs (in and in2）and mix it into one effect.

The effect produced is very similar to the combined filter effect described earlier in this article.