SVG uses <filter> element to define filters. <filter>
element uses an id attribute to uniquely identify it.Filters are defined
within <def> elements and then are referenced by graphics
elements by their ids.
SVG provides a rich set of filters. Following is the list of the commonly used filters.
SVG provides a rich set of filters. 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
Declaration
Following is the syntax declaration of <filter> element. We've shown main attributes only.<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>
Attributes
| Sr.No. | Name & Description |
|---|---|
| 1 | filterUnits − units to define filter effect region. It specifies the coordinate system for the various length values within the filter and for the attributes defining the filter subregion. If filterUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'filter' element is used. If filterUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'filter' element is used. Default is userSpaceOnUse. |
| 2 | primitiveUnits − units to define filter effect region. It specifies the coordinate system for the various length values within the filter and for the attributes defining the filter subregion. If filterUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'filter' element is used. If filterUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'filter' element is used. Default is userSpaceOnUse. |
| 3 | x − x-axis co-ordinate of the filter bounding box. Defeault is 0. |
| 4 | y − y-axis co-ordinate of the filter bounding box. Default is 0. |
| 5 | width − width of the filter bounding box. Default is 0. |
| 6 | height − height of the filter bounding box. Default is 0. |
| 7 | filterRes − numbers representing filter regions. |
| 8 | xlink:href − used to refer to another filter. |
Example
testSVG.htm<html> <title>SVG Filter</title> <body> <h1>Sample SVG Filter</h1> <svg width="800" height="800"> <defs> <filter id="filter1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" /> </filter> <filter id="filter2" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <g> <text x="30" y="50" >Using Filters (Blur Effect): </text> <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3" fill="green" filter="url(#filter1)" /> </g> </svg> </body> </html>
- Two <filter> elements defined as filter1 and filter2.
- feGaussianBlur filter effect defines the blur effect with the amount of blur using stdDeviation.
- in="SourceGraphic" defines that the effect is applicable for the entire element.
- feOffset filter effect is used to create shadow effect. in="SourceAlpha" defines that the effect is applicable for the alpha part of RGBA graphics.
- <rect> elements linked the filters using filter attribute.
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.Filter with Shadow effect
<html> <title>SVG Filter</title> <body> <h1>Sample SVG Filter</h1> <svg width="800" height="800"> <defs> <filter id="filter1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" /> </filter> <filter id="filter2" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <g> <text x="30" y="50" >Using Filters (Shadow Effect): </text> <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3" fill="green" filter="url(#filter2)" /> </g> </svg> </body> </html>
No comments:
Post a Comment