MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

There are situations, where basic shapes do not provide the flexibility you need to achieve a certain effect. Drop shadows, to provide a popular example, cannot be created reasonably with a combination of gradients. Filters are SVG's mechanism to create sophisticated effects.

A basic example is to add a blur effect to SVG content. While basic blurs can be achieved with the help of gradients, the blur filter is needed to do anything beyond.

You will get a full reference on SVG Filter effects on W3C Recommendation.

 

Document Tags and Contributors

 Contributors to this page: ariyankhan, ClintPriest, trevorh, Jeremie, Manuel_Strehl
 Last updated by: ariyankhan,