OpenLayers Color an SVG Icon

Question

I have been following the Icon Colors example on the OpenLayers site, http://openlayers.org/en/latest/examples/icon-color.html?q=color.

This works well for me with png and jpg images, however when I switch to using svg images the color does not change at all. There are no errors. The color just does not change.

Here is the snippet of code where the color change happens:

    /*set the colour*/
    var style = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 0.5],
            src : 'img/icons/example.svg',
            color: '#8959A8'
        }))
    }); 

Any advice would be greatly appreciated!

Answer 1

Apparently the fill property for your SVG needs to be white (#fff). The doc doesn't say anything about this but my conclusion is that any white (#fff) will be colorized with the value passed to the color attribute, independently of the type of the image.