Understanding SVG Filters
SVG filters are powerful tools that modify the appearance of SVG elements. They work by processing graphical elements through a series of operations, such as blurring, color manipulation, and shadow generation. Filters are defined using <filter> elements within an SVG file or embedded directly into HTML using CSS.
Basics of Combining Filters
Filter Elements:
<feGaussianBlur>: Applies a blur effect.<feColorMatrix>: Manipulates colors.<feOffset>:Shifts elements by a specified amount.<feBlend>: Blends two input images.
Combining Filters:
Filters can be combined by chaining them together within a <filter> element.
Each filter operation modifies the appearance of the element based on the previous operation.
Example 1: Blur and Brightness
Let's start with a basic example of combining a blur effect with brightness adjustment:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurBrightness">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feComponentTransfer>
<feFuncR type="linear" slope="1.2" />
<feFuncG type="linear" slope="1.2" />
<feFuncB type="linear" slope="1.2" />
</feComponentTransfer>
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#blurBrightness)" />
</svg>
In this example:
<feGaussianBlur>creates a blur effect with a stdDeviation of 5.<feComponentTransfer>adjusts the brightness with a linear slope of 1.2 for each color channel.
Example 2: Blur and Drop Shadow
Combining a blur effect with a drop shadow can create a visually appealing depth effect:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
<feOffset in="blur" dx="2" dy="2" result="offsetBlur" />
<feBlend in="SourceGraphic" in2="offsetBlur" mode="normal" />
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#blurShadow)" />
</svg>
Here:
- <feGaussianBlur> creates a blur effect using the alpha channel.
- <feOffset> offsets the blurred image to create a shadow.
- <feBlend> blends the shadow with the source graphic.
Example 3: Blur, Brightness, and Contrast
Combining blur, brightness, and contrast can produce dynamic visual effects:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurBrightnessContrast">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
<feComponentTransfer>
<feFuncR type="linear" slope="1.5" />
<feFuncG type="linear" slope="1.5" />
<feFuncB type="linear" slope="1.5" />
</feComponentTransfer>
<feComponentTransfer>
<feFuncR type="gamma" amplitude="1" exponent="0.8" offset="0" />
<feFuncG type="gamma" amplitude="1" exponent="0.8" offset="0" />
<feFuncB type="gamma" amplitude="1" exponent="0.8" offset="0" />
</feComponentTransfer>
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#blurBrightnessContrast)" />
</svg>
- We apply a blur effect with
<feGaussianBlur>and adjust brightness and contrast using<feComponentTransfer>. <feFuncR>,<feFuncG>, and<feFuncB>are used to control the red, green, and blue channels, respectively.
Example 4: Advanced Blend Modes
SVG supports blend modes like multiply, screen, overlay, etc., which can be combined with other filters for creative effects:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blendMode">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
<feBlend in="SourceGraphic" in2="blur" mode="screen" />
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#blendMode)" />
</svg>
Here, we use <feBlend> with mode="screen" to blend the source graphic with the blurred version using a screen blend mode.
Practice Excercise Practice now