class="post-template-default single single-post postid-6712 single-format-standard unknown has-banner" >

SVG Filters

Postedon Jan 7, 2017in Design

Last month I wrote on the B² Interactive blog about using SVG filters to help enhance all the photos on a large website I was working on. Using SVG, I was able to brighten all the photos without having to download them all and batch process them through Adobe Photoshop again. Huge time saver.

Near the end of a recent website project, I ran into an interesting problem. The client wanted to switch the main color of the site to black. And while the magic of CSS makes that request straightforward, there was a rub. I had used color overlays on top of all of the pages’ image headers. Now that the overlay was black, the photos used in those headers lost a lot of their brightness and contrast.

Give it a read. It may help you out on your next project. I barely scratched the surface with how powerful SVG filters are and I’m excited to use them more.