Last Sunday I spent a free afternoon messing around with levelling up my skills with SVG.

I’d been meaning to finish reading Chris Coyier’s book Practical SVG for a while and although it goes pretty deep, I finally achieved it. Much of it focuses on using SVG within an icon system.

I have a number of thoughts I’ll share soon regarding my preferences on when to use inline SVG and when to use SVG as a background image.

In the meantime, here’s some fun I had implementing one of the many design tricks from the book – nesting a photo within an <svg> element then applying i) a greyscale filter; and ii) a black-to-white gradient mask to transition the photo from colour to black and white.

Since the photo’s subject is a lovely piece of fish, I’m calling my remix Grey Scales.

Check out Grey Scales on CodePen.

PS the original photo is courtesy of my talented wife. Clair – sorry for ruining your lovely photo and for yet another in a long line of fish puns.