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.
- 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>
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.
Table of Contents
1.svg tutorial
2.svg overview
3.svg shapes
4.svg text
5.svg stroke
6.svg filters
7.svg patterns
8.svg gradients
9.svg interactivity
10.svg linking
11.svg loaders
12.svg dialog box effects
13.svg icons
14.svg clock
15.svg drag
16.svg keypoint
17.svg maps
18.svg amchart
19.svg graph
20.svg flat surface shade
21.svg image filter effect
22.svg text effects
23.svg text with css effects
24.svg arrow effects
25.svg brand effects
26.svg gooey effects
27.svg gradients
28.svg playful effects
29.svg scroll effects
30.svg slide show effects
31.svg tab effects
32.svg raphaeljs effects
33.svg velocityjs effects
34.svg walkwayjs effects
35.svg zpath
36.svg vaguejs effects
37.svg transformation effects
38.svg full screen overlay effects
39.svg laylinepainterjs effects
40.svg demo game
41.svg real time svg ad
42.svg questions and answers tutorialspoing
43.svg quick guide
44.svg useful resources
45.discuss svg