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.
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.