SVG filter Element (original) (raw)

Last Updated : 31 Mar, 2022

The SVG 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" >

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 `

        <g>
            <rect x="50" y="50" width="150"
                  height="150" fill="gray"
                  filter="url(#filter2)" />
        </g>
    </svg>
</body>

`

Output:

Example: Different shape and customize shadow.

html `

        <g>
            <circle cx="80" cy="80" r="50" 
                    stroke="black" stroke-width="2" 
                    fill="green"
                    filter="url(#filter2)" />
        </g>
    </svg>
</body>

`

Output: