Background Image SVG Colour

At work, there was an instance with an existing background image needed to be able to change the colour, dynamically, to the page scheme.

The existing image was being used in CSS in 'blockquote:before', and the first thing needed was to convert the png image to svg. Since the svg isn't part of the DOM with this CSS, we can't use the 'fill' CSS property. Therefore, we need to use a mask.

    .extended-case-study-no-form blockquote:before {
        -webkit-mask: url(/Images/Global/method-blockquote.svg);
        mask: url(/Images/Global/method-blockquote.svg);
        background-color: @color;
        -webkit-mask-size: 64.5px;
        mask-size: 64.5px;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

It's important to note the mask-size property. At first it was 100%, and it looked like this method didn't work, however it was working, it was just the image was far too large for the element.