HTML SVG <filter>
The SVG <filter> element is used to define filters. To identify uniquely filter use id. The filters are defined in def elements.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
<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.