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

<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

<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>