SVG filter Attribute Last Updated : 31 Mar, 2022 Improve Improve Like Article Like Save Share Report The filter attribute is used to specify the filter effects that are defined by the <filter> element which are to be applied to its elements. Syntax: filter="value" Attribute values: value: The filter values to be applied to the element We will use the filter attribute for setting the filter of the elements. Example 1: HTML <!DOCTYPE html> <html> <body> <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"> <filter id="fil"> <!--Using GaussianBlur filter effect--> <feGaussianBlur stdDeviation="5" /> </filter> <rect x="80" y="30" width="200" height="200" filter="url(#fil)" /> </svg> </body> </html> Output: Example 2: HTML <!DOCTYPE html> <html> <body> <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <!--> Using GaussianBlur filter effect<---> <feGaussianBlur stdDeviation="5" /> </filter> <rect x="80" y="30" width="200" height="200" filter="url(#blur)" fill="green" /> </svg> </body> </html> Output: Like Article Suggest improvement Previous SVG fill-opacity Attribute Next SVG flood-color Attribute Share your thoughts in the comments Add Your Comment Please Login to comment...