CSS Filter Property
I finally pushed the new design live over this past weekend. I'd hobbled some stuff together from the previous design, just for speed & to avoid losing momentum.
One such element is the logomark in the top left. The speech bubble that resembles the letter Q.
When I first created that back in 2011 (wow), I created the
svg file in Sketch and then displayed it on my page using an empty span tag and setting the SVG as a background image. I then used the
mask CSS function to change the colour and
mask-size to adjust the size.
I reused this chunk on the new build as it worked in my testing but alas, it's been pointed out that it doesn't work too well elsewhere.
Whilst discussing the issue with the guys at On The Side, it was suggested I drop the
mask CSS function and use the SVG as an image instead of a background-image.
I'd tried this approach in the past but didn't have much luck with changing the colour of the logo so reverted back to
mask because it "worked".
Now, I'm older and thanks to some, wiser, I've dropped the SVG as an image, but also stuck it in as an
inline svg to save on another http request.
Mike mentioned it was worth looking at the CSS
filter property so I done a little digging and a little playing offline and was able to colour the icon although it seemed harder than I had hoped.
Here's the code I ended up using
invert(0.4) sepia(1) hue-rotate(3deg) saturate(94) brightness(84%);
My SVG logo is originally black and getting a colour out of black is really difficult.
invert function inverts the colour. The original was black so inverting it fully would make it white. But thats equally as tough so
invert(.4) turns out somewhere in the middle, or grey.
sepia function then adds a sepia tone to the logomark. Again, the value entered determines the level of tone applied. Giving it
sepia(1) is cranking it up 100%. This gave our grey logomark a sepia, or greeny-brown tone.
Now that it's a colour rather than monotone, we can use
brightness to adjust our toned logomark to the correct colour.
That's a bit trial and error but we got there in the end.
When I mentioned my difficulties to Mike, he asked why I didn't just colour the SVG red in the first place.