This is a simple proof-of-concept demo for a refresh of my website, to show that SVGs don’t have to be as static as typically used - and I don’t even mean to suggest they require animation, just that they have the ability to be more flexible than currently used.
Why do this? I’ve seen a few people (ab)use currentColor to push styles into <svg> images, but no-one doing the inverse, having their HTML adapt due to the image used.
This simply overrides the internal colours set on a few fill rules (and for Reddit, stroke colour), to make them less visually heavy, or more impactful as required.
Further changes could include changing fill-rule to make them truly transparent, or using recent CSS filters to desaturate the colours while still keeping to the same branding.
~ johndrinkwater
We take our source image, like so: and apply a few rules to it to get the following.
(Chrome breaks with <use>, assume you see a Twitter bird here.)
Hover over the logos below: