1. Blur Filter
The blur filter in SVG is used to create a blur effect, making elements appear out of focus or softened. It's commonly used for creating depth, highlighting focus areas, or adding a dreamy look to graphics.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurFilter" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#blurFilter)" />
</svg>
In this example, a blur filter with a stdDeviation of 5 is applied to a blue rectangle, creating a blurred effect around the edges of the rectangle.
2. Brightness Filter
The brightness filter adjusts the brightness of SVG elements, making them appear brighter or darker. It's useful for creating lighting effects or adjusting the overall tone of graphics.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="brightnessFilter" x="0" y="0">
<feComponentTransfer>
<feFuncR type="linear" slope="1.5" />
<feFuncG type="linear" slope="1.5" />
<feFuncB type="linear" slope="1.5" />
</feComponentTransfer>
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#brightnessFilter)" />
</svg>
In this example, a brightness filter with a linear slope of 1.5 is applied to a blue rectangle, increasing its brightness.
3. Contrast Filter
The contrast filter adjusts the contrast of SVG elements, enhancing or reducing the difference between light and dark areas. It's effective for making graphics more vibrant or adjusting their tonal range.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="contrastFilter" x="0" y="0">
<feComponentTransfer>
<feFuncR type="linear" slope="2" intercept="-0.5" />
<feFuncG type="linear" slope="2" intercept="-0.5" />
<feFuncB type="linear" slope="2" intercept="-0.5" />
</feComponentTransfer>
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#contrastFilter)" />
</svg>
In this example, a contrast filter with a linear slope of 2 and an intercept of -0.5 is applied to a blue rectangle, increasing its contrast.
4. Drop Shadow Filter
The drop shadow filter adds a shadow effect behind SVG elements, creating a sense of depth or highlighting their presence. It's commonly used for buttons, icons, and UI elements.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadowFilter" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="2" result="offsetBlur" />
<feFlood flood-color="black" flood-opacity="0.5" result="offsetColor" />
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetResult" />
<feMerge>
<feMergeNode in="offsetResult" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#dropShadowFilter)" />
</svg>
In this example, a drop shadow filter with a Gaussian blur, offset, and composite is applied to a blue rectangle, creating a subtle shadow effect around it.
Applying Multiple Filters
You can combine multiple filters to achieve complex visual effects. For example, combining blur and drop shadow filters can create a blurred shadow effect, adding depth and focus to elements.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurShadowFilter" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" />
<feOffset dx="3" dy="3" result="offsetBlur" />
<feFlood flood-color="black" flood-opacity="0.5" result="offsetColor" />
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetResult" />
<feMerge>
<feMergeNode in="offsetResult" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#blurShadowFilter)" />
</svg>
In this example, a combination of blur and drop shadow filters is applied to a blue rectangle, creating a blurred shadow effect around it.
Practice Excercise Practice now