SVG filter Element
Last Updated :
31 Mar, 2022
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:
Share your thoughts in the comments
Please Login to comment...