You know the trade-off. Use the img tag to display an SVG, and you get clean markup — at the cost of styling the SVG using its properties like fill, stroke, SVG filters and more.

There's a new wave of CSS madness, ushered in by the recent additions to the W3 Filters Specification. An important issue that keeps coming up is the new drop-shadow filter and whether it serves a purpose. We already have the wonderful box-shadow property that allows one to specify a horizontal offset, vertical offset, optional blur radius and optional spread radius. So why another drop-shadow option?

With CSS filters, you can manipulate your images within your code itself, which makes for interesting possibilities, especially while using transitions or animations. You can blur images, convert them to black-n-white, boost saturation or brightness and more, with just a line of CSS.