Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Safari renders wrong colors when using blur filter

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?

like image 365
Dafen Avatar asked Mar 24 '14 16:03

Dafen


1 Answers

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">
like image 172
Michael Mullany Avatar answered Sep 23 '22 05:09

Michael Mullany