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.

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

The 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 hue-rotate, saturate and 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.