SVG gaussian blur in Safari unexpectedly lightens image

问题

Using svg guassian blur filter to perform cross browser image blurring. Overall, it works really well except in the case of Safari.

In desktop Safari, the image is blurred but it is also lightened. This doesn't happen in any other browser (literally tested in Firefox, Chrome, IE9-11, and mobile Safari in iOS 7).

Here's a jsfiddle demonstrating the live svg filter and a linked screenshot from what Safari is seeing, http://jsfiddle.net/vtDYg/3/

Here also is the svg code current in use:

<svg class="sg-blur-2">
  <defs>
    <filter id="sg-blur-2">
      <feGaussianBlur stdDeviation="2"></feGaussianBlur>
    </filter>
  </defs>
  <image xlink:href="http://fillmurray.com/300/100" width="100%" height="100%" filter="url(#sg-blur-2)"></image>
</svg>

Here's what desktop Safari is seeing:

I thought the color space of the jpeg in question might be an issue, so I specified the 'color-profile' attribute to both 'sRGB', 'RGB', and 'rgb' but that had no effect.

回答1:

It seems like you can correct or at least improve things by setting color-interpolation-filters="sRGB" on the filter.

feGaussianBlur should work in the linearRGB colour space with premultiplied RGBA by default with color-interpolation-filters allowing it to be switched to sRGB. That is certainly the case with Firefox since I wrote the code to do that there.

回答2:

The answer, recommended by @RobertLongson in the first comment, requires the attribute 'color-interpolation-filters="sRGB"' to the feGaussianBlur filter.

http://jsfiddle.net/vtDYg/6/

<svg class="sg-blur-2">
  <defs>
    <filter id="sg-blur-2">
      <feGaussianBlur stdDeviation="2" color-interpolation-filters="sRGB"></feGaussianBlur>
    </filter>
  </defs>
  <image xlink:href="http://fillmurray.com/300/100" width="100%" height="100%" filter="url(#sg-blur-2)"></image>
</svg>

To the best of my knowledge, the svg spec indicates that feGaussianBlur filter should use the linearRGB color space by default. All browsers except Safari 7 seem to do this incorrectly and default to sRGB. Oddly, mobile Safari also defaults to sRGB.

来源：https://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image

标签

svg

safari

gaussian

svg-filters