The SVG <filter> element is used to define filters. To identify uniquely filter use id. The filters are defined in def elements.
<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.
- feOffset – filter for drop shadows
- 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: Different shape and customize shadow.