Question

I try to apply a blur filter to a svg elment, but it seems that Safari can't render the colors right. Here is an example of my problem:

<svg height="110" width="110">
    <defs>
          <filter id="f1" x="0" y="0">
               <feGaussianBlur stdDeviation="15" />
          </filter>
    </defs>
        <rect width="90" height="90"  stroke-width="3" fill="#ff4300" filter="url(#f1)" />
</svg>

http://jsfiddle.net/6gZ8t/1/

Safari:

This is Safari

Chrome:

This is Chrome

The color is right in every brwoser expet Safari, where it is much brighter...Does anyone know a fix for this?

Was it helpful?

Solution

Safari's default color interpolation (linearRGB) seems to be broken in recent updates. If you switch to sRGB across the board in your filters, you will get more correct results (although they'll all be gamma corrected).

<filter id="f1" x="0" y="0" color-interpolation-filters="sRGB">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top