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:
Chrome:
The color is right in every brwoser expet Safari, where it is much brighter...Does anyone know a fix for this?
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With