CODEWITHSUNDEEP
cssgoogle-chromecross-browsersvg-filters
thomasjonas
thomasjonas

Reputation: 480

SVG filter different in Chrome

I'm trying to apply a svg filter to an image. The filter is a yellow to grey gradient map. This works great on Firefox and Safari, but in Chrome the filter has a strange result where the colors are different.

I made a fiddle here: http://jsfiddle.net/thomasjonas/a3pu9uo9/2/

Code for the filter

<svg version="1.1" width="0" height="0"><filter id="filter"><feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0.8"></feFuncR><feFuncG type="table" tableValues="0.9294117647058824 0.8"></feFuncG><feFuncB type="table" tableValues="0 0.8"></feFuncB><feFuncA type="table" tableValues="1 1"></feFuncA></feComponentTransfer></filter></svg>

CSS

img {
    -webkit-filter: url(#filter);
    filter: url(#filter);
}

Upvotes: 2

Views: 1444

Answers (2)

Wayne Smith
Wayne Smith

Reputation: 4868

feComponentTransfer is what is causing the yellow color. I'm not sure why effects are different between browsers? For what it is worth the version of Firefox on my system is also giving yellow.

<feComponentTransfer color-interpolation-filters="sRGB">
   <feFuncR type="table" tableValues="1 0.8"></feFuncR>
   <feFuncG type="table" tableValues="0.9294117647058824 0.8"></feFuncG>
   <feFuncB type="table" tableValues="0 0.8"></feFuncB>
   <feFuncA type="table" tableValues="1 1"></feFuncA>
</feComponentTransfer>

I'm not sure what effect you are attempting to create with the fecomponentTransfer. But it you place it before the feColorMatrix which creates your gray screen you will get the grayed output of feComponentTransfer.

changing the values of feComponentTransfer a little, (after graying), gives the effect of an old yellowed, black and white photo. Yellowing created by colors R and G being turned a little higher and blue not. RGB colors all max to a darkness of 80% because the black has faded over time.

<img src="http://lust.nl/media/image/large/A0_madurodam60.jpg"/>

<svg version="1.1" width="0" height="0"><filter id="filter">

    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix>
       <feComponentTransfer color-interpolation-filters="sRGB">
       <feFuncR type="table" tableValues="0.09294117647058824 0.8"></feFuncR>
       <feFuncG type="table" tableValues="0.09294117647058824 0.8"></feFuncG>
       <feFuncB type="table" tableValues="0 0.8"></feFuncB>
       <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer>
    </filter>
</svg>

Actually yellowing the white moving R and G all the way to 1, and blue down to .7. Is the result I like the best.

<feComponentTransfer color-interpolation-filters="sRGB">
    <feFuncR type="table" tableValues=".091 1"></feFuncR>
    <feFuncG type="table" tableValues="0.09294117647058824 1"></feFuncG>
    <feFuncB type="table" tableValues="0 0.7"></feFuncB>
    <feFuncA type="table" tableValues="1 1"></feFuncA>
</feComponentTransfer></filter></svg>

For just a yellow to gray filter all you need is feColorMatrix

<filter id="colorMatrix">
  <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 .7 0, 0.2126 0.7152 0.0722 .6 0, 0 0 0 0 0, 0 0 0 1 0"/>
</filter>

Upvotes: 1

Michael Mullany
Michael Mullany

Reputation: 31705

Move that "color-interpolation-filters='sRGB' into your filter element and you'll get a consistent result. Firefox/Safari or Chrome seem to be using sRGB for the entire filter (in spite of it only being declared for the feComponentTransfer). I don't know which one is doing it wrong.

Upvotes: 2

Related Questions