Open In App

SVG filter Element

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads