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:
< html > < title >SVG Filter</ title > < body > < svg width = "400" height = "400" > < defs > < filter id = "filter2" x = "0" y = "0" width = "150%" height = "150%" > < feOffset result = "offOut" dx = "30" dy = "30" /> < feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "10" /> < feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" /> </ filter > </ defs > < g > < rect x = "50" y = "50" width = "150" height = "150" fill = "gray" filter = "url(#filter2)" /> </ g > </ svg > </ body > </ html > |
Output:
Example: Different shape and customize shadow.
< html > < title >SVG Filter</ title > < body > < svg width = "400" height = "400" > < defs > < filter id = "filter2" x = "0" y = "0" width = "150%" height = "150%" > < feOffset result = "offOut" dx = "30" dy = "30" /> < feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" /> </ filter > </ defs > < g > < circle cx = "80" cy = "80" r = "50" stroke = "black" stroke-width = "2" fill = "green" filter = "url(#filter2)" /> </ g > </ svg > </ body > </ html > |
Output:
Contact Us