SVG Filters
You are Here:
What to filter?
The <filter> SVG element defines a custom filter effect by grouping atomic filter primitives. It is never rendered itself, but must be used by the filter CSS property for HTML/SVG elements, or the filter attribute on SVG elements.
In this example, we will use the <feGaussianBlur> SVG element to blur the input image by the amount specified in stdDeviation, which defines the bell-curve.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<body>
<svg height="110" width="110">
<defs>
<filter id="point" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
</defs>
<rect width="90" height="90" stroke="red" stroke-width="3"
fill="#339933" filter="url(#point)" />
</svg>
</body>
</html>
Attributes Value
| Attribute | Explanation |
|---|---|
| x | Specifies a x-axis coordinate of the filter bounding box. Default is 0. |
| y | Specifies a y-axis coordinate of the filter bounding box. Default is 0. |
| width | Specifies a width of the filter bounding box. Default is 0. |
| height | Specifies a height of the filter bounding box. Default is 0. |
| filterRes | Specifies the numbers representing filter regions. |
| filterUnits | Specifies the coordinate system for attributes x, y, width and height. |
| primitiveUnits | Specifies the coordinate system for the various length values within the filter primitives and for the attributes that define the filter primitive subregion. |
| xlink:href | Used to refer to another filter. |
How to Blend and Offset?
- feBlend - The
<feBlend>SVG filter primitive composes two objects together ruled by a certain blending mode. - feOffset - The
<feOffset>SVG filter primitive allows to offset the input image. The input image as a whole is offset by the values specified in the dx and dy attributes.
In this example, we will blend and offset the rectangle.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<body>
<svg height="120" width="120">
<defs>
<filter id="point1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="red" stroke-width="3"
fill="#339933" filter="url(#point1)" />
</svg>
</body>
</html>
How to Create a Shadow?
In this example, we will create a shadow image for the rectangle by using <feOffset>, <feGaussianBlur>, and <feBlend> SVG attributes.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<body>
<svg height="125" width="125">
<defs>
<filter id="point2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="red" stroke-width="3"
fill="#339933" filter="url(#point2)" />
</svg>
</body>
</html>
Filters
| Value | Explanation |
|---|---|
| <feBlend> | The <feBlend> SVG filter primitive composes two objects together ruled by a certain blending mode. |
| <feColorMatrix> | The <feColorMatrix> SVG filter element changes colors based on a transformation matrix. |
| <feComponentTransfer> | Th <feComponentTransfer> SVG filter primitive performs color-component-wise remapping of data for each pixel. |
| <feComposite> | The <feComposite> SVG filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor, and lighter. |
| <feConvolveMatrix> | The <feConvolveMatrix> SVG filter primitive applies a matrix convolution filter effect. |
| <feDiffuseLighting> | The <feDiffuseLighting> SVG filter primitive lights an image using the alpha channel as a bump map. |
| <feDisplacementMap> | The <feDisplacementMap> SVG filter primitive uses the pixel values from the image from in2 to spatially displace the image from in. |
| <feDropShadow> | The <feDropShadow> filter primitive creates a drop shadow of the input image. |
| <feFlood> | The <feFlood> SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity. |
| <feGaussianBlur> | The <feGaussianBlur> SVG filter primitive blurs the input image by the amount specified in stdDeviation. |
| <feImage> | The <feImage> SVG filter primitive fetches image data from an external source and provides the pixel data as output. |
| <feMerge> | The <feMerge> SVG element allows filter effects to be applied concurrently instead of sequentially. |
| <feMorphology> | The <feMorphology> SVG filter primitive is used to erode or dilate the input image. |
| <feOffset> | The <feOffset> SVG filter primitive allows to offset the input image. |
| <feSpecularLighting> | The <feSpecularLighting> SVG filter primitive lights a source graphic using the alpha channel as a bump map. |
| <feTile> | The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. |
| <feTurbulence> | The <feTurbulence> SVG filter primitive creates an image using the Perlin turbulence function. |
Reminder
Hi Developers, we almost covered 91% of SVG Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in SVG.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
