Understanding SVG Filters
SVG filters operate by taking input from an SVG graphic, applying various operations to it, and producing modified output. Filters can be applied to entire SVG elements or specific parts of an SVG image.
Filters are defined using the <filter> element within an SVG file or in an external file that can be referenced using CSS. Each filter consists of one or more filter primitives, such as <feGaussianBlur>, <feColorMatrix>, <feOffset>, etc. These primitives define the operations that the filter performs.
Common SVG Filter Primitives
- feGaussianBlur: Applies a Gaussian blur to the input.
- feColorMatrix: Allows color transformations like grayscale, sepia, hue rotation, etc.
- feOffset: Shifts the input image by a specified amount.
- feBlend: Blends two input images using various blend modes.
- feDropShadow: Adds a drop shadow to the input image.
- feComposite: Combines two images using a specified operator.
- feConvolveMatrix: Applies a matrix convolution to the input.
- These primitives can be combined and configured to achieve a wide range of visual effects.
Example 1: Applying a Gaussian Blur
Let's start with a simple example of applying a Gaussian blur to an image using SVG filters.
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurFilter" x="0" y="0" width="100%" height="100%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<image x="0" y="0" width="400" height="300" xlink:href="image.jpg" filter="url(#blurFilter)" />
</svg>
In this example:
- We define a filter named blurFilter that applies a Gaussian blur with a standard deviation of 5 to the input image (in="SourceGraphic").
- The
<image>element displays the image image.jpg and applies the blurFilter to it using the filter attribute.
Example 2: Creating a Sepia Effect
Now, let's create a sepia effect using the <feColorMatrix> primitive.
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="sepiaFilter" x="0" y="0" width="100%" height="100%">
<feColorMatrix type="matrix"
values="0.393 0.769 0.189 0 0
0.349 0.686 0.168 0 0
0.272 0.534 0.131 0 0
0 0 0 1 0" />
</filter>
</defs>
<image x="0" y="0" width="400" height="300" xlink:href="image.jpg" filter="url(#sepiaFilter)" />
</svg>
Here, we define a filter named sepiaFilter that uses a <feColorMatrix> to apply a sepia color transformation to the input image.
Example 3: Adding a Drop Shadow
Let's add a drop shadow effect to an image using the
<feDropShadow> primitive.<defs>
<filter id="dropShadowFilter" x="-20%" y="-20%" width="140%" height="140%">
<feOffset in="SourceAlpha" dx="5" dy="5" result="offsetBlur" />
<feGaussianBlur in="offsetBlur" stdDeviation="5" result="shadowBlur" />
<feBlend in="SourceGraphic" in2="shadowBlur" mode="normal" />
</filter>
</defs>
<image x="0" y="0" width="400" height="300" xlink:href="image.jpg" filter="url(#dropShadowFilter)" />
</svg>
In this example, we define a filter named dropShadowFilter that first applies an offset to create a shadow, then blurs it using Gaussian blur, and finally blends it with the source graphic to create a drop shadow effect.
Example 4: Combining Filters
Filters can also be combined to achieve complex effects. Let's combine blur and color matrix filters to create a dreamy effect.
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dreamyEffect" x="0" y="0" width="100%" height="100%">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 0.5 0" />
</filter>
</defs>
<image x="0" y="0" width="400" height="300" xlink:href="image.jpg" filter="url(#dreamyEffect)" />
</svg>
In this example, we first apply a Gaussian blur with a standard deviation of 10 to the source graphic and then apply a color matrix to reduce the opacity (values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0"), creating a dreamy effect.
External SVG Filters with CSS
You can also define SVG filters in an external file and reference them using CSS.
<!-- filter.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="externalBlur" x="0" y="0" width="100%" height="100%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</svg>
css
Copy code
/* styles.css */
.image-container {
filter: url(filter.svg#externalBlur);
}
In this example, we define a filter in filter.svg and apply it to an image container using CSS.
Practice Excercise Practice now