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: