Colors wildly vary from Chrome to Safari

[mikestecker]

Please see screenshot: https://www.dropbox.com/s/ddmvfbfpjbm8fde/Screenshot%202014-03-14%2014.41.10.png

To me, Safari is much closer to what I would think it should be than Chrome. Not sure if this is a Chrome bug or something in the script.

[awgreenblatt]

Very interesting. There's nothing browser-specific in the code, so I'm guessing it has something to do with the different browser SVG implementations, perhaps around the SVG color-interpolation-filters. I wonder if it would be possible to prove that Chrome is displaying the wrong colors.

[mikestecker]

From my research it seems that Chrome is reading sRGB as linearRGB.

When I changed:
var componentTransfer = this.addElement(doc, filter, 'feComponentTransfer', svgns, {'color-interpolation-filters': 'sRGB'});
to
var componentTransfer = this.addElement(doc, filter, 'feComponentTransfer', svgns, {'color-interpolation-filters': 'linearRGB'});

then all 3 browsers seemed to display the same as Chrome did with it set to sRGB. It's still not displaying as expected which is why I think Chrome is displaying incorrectly here.

Also, I found this write up which might be related: http://tavmjong.free.fr/blog/?p=765

BTW, here it is on the site I'm building right now in the latest versions of all 3 browsers (FF left, Safari middle, Chrome right):
https://www.dropbox.com/s/aamkagwpzarfqp5/Screenshot%202014-03-14%2017.11.59.png

[theamnesic]

Hi everyone,

In my case, Chrome, Opera and Firefox are OK (top), Safari is really darken (bottom) :

Trying to change the 'color-interpolation-filters' but I can't have the same result on Safari.
Any idea ?

Thanks !

— G