What to filter?
<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.
|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.
How to Create a Shadow?
In this example, we will create a shadow image for the rectangle by using
<feBlend> SVG attributes.
|<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.|
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
This channel is primarily useful for Full Stack Web Developer.