SVG filter Element

The SVG <filter> element is used to define filters. To identify uniquely filter use id. The filters are defined in def elements.

Syntax:

<filter
 filterUnits="units to define filter effect region"
 primitiveUnits="units to define primitive filter subregion"
 
 x="x-axis co-ordinate" 
 y="y-axis co-ordinate" 
 
 width="length"
 height="length"
 
 filterRes="numbers for filter region"
 xlink:href="reference to another filter" >
</filter>

There are some filters provided by the SVG.

Following is the list of the commonly used filters.

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset - filter for drop shadows
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight

Attributes:

• filterUnits: units to define filter impact region. It specifies the coordinate system for the assorted length values inside the filter and for the attributes defining the filter subregion.
• primitiveUnits: units to define filter impact region. It specifies the coordinate system for the varied length values inside the filter and for the attributes defining the filter subregion.
• x: x-axis of filter bounding box.
• y: y-axis of filter bounding box.
• width: width of the bounding box.
• Height: height of the bounding box.
• filterRes: number of the filter region.
• xlink:href:  refer to another filter.

Example:

Output:

👁 Image
Example: Different shape and customize shadow. Output: 👁 Image