CODEWITHSUNDEEP
svgsvg-filters
user1448485
user1448485

Reputation: 47

SVG Filter: Different colouring depending on browser

I have a black and white image that I'm trying to recolour with an SVG filter. The colouring looks a lot darker in Safari than it does in Chrome, is there any way I can make Safari look a little more consistent with chrome at all?

The CSS code is as follows

.container-teamMembers a.six img {
    -webkit-filter: url(#duotone_bright_green);
    -moz-filter: url(#duotone_bright_green);
    -o-filter: url(#duotone_bright_green);
    -ms-filter: url(#duotone_bright_green);
    filter: url(#duotone_bright_green);
}

and the SVG filter is

<svg xmlns="http://www.w3.org/2000/svg" class="svg-filters">
<filter id="duotone_bright_green">
    <feColorMatrix type="matrix" result="grayscale" values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0"></feColorMatrix>
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone_blue_black">
<feFuncR type="table" tableValues="0.03137254902 0.74509803921"></feFuncR>
<feFuncG type="table" tableValues="0.007843137255 0.81568627451"></feFuncG>
<feFuncB type="table" tableValues="0.02352941176 0.0431372549"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer> 
</filter>
</svg>

Could anyone tell me how I get Safari looking a bit lighter / more consistent with Chrome?

Upvotes: 0

Views: 677

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31705

This is going to seem dumb - but move the color-interpolation-filters="sRGB" into the filter element instead of the feComponentTransfer - Safari doesn't seem to check for it when it's put into a primitive.

Here is the filter that works for me. I'm running Chrome 73 and Safari 12.1 on MacOS Mojave on an older Macbook Pro (2016).

<svg xmlns="http://www.w3.org/2000/svg" class="svg-filters">
<filter id="duotone_bright_green" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" result="grayscale" values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0"></feColorMatrix>
<feComponentTransfer  result="duotone_blue_black">
<feFuncR type="table" tableValues="0.03137254902 0.74509803921"></feFuncR>
<feFuncG type="table" tableValues="0.007843137255 0.81568627451"></feFuncG>
<feFuncB type="table" tableValues="0.02352941176 0.0431372549"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer> 
</filter>
</svg>

And here is the screenshot - Chrome left, Safari right.

enter image description here

Upvotes: 2

Related Questions