Svg with Drop-Shadow Blurry on Mobile Browser

Why is filter(drop-shadow) causing my SVG to disappear in Safari?

Probably is a little late, but just in case I will leave you my answer. I had the same problem with Safari and I figured out that this seems to be a Safari issue/bug. You can work around this bug just wrapping your SVG tag with another HTML tag like a div and apply to this element the drop-shadow filter as you did in your example.
Here you have your example modified with the wrapper element

https://codepen.io/mauromjg/pen/rLaqWG

<div class="svg-wrapper">
    <svg>...</svg>
</div>

//CSS
.svg-wrapper {
    -webkit-filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
    filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
}

Hope that helps!

SVG: Drop-Shadow filter pixelates SVG on mobile Safari

You should try explicitly setting the "filterRes" attribute of the filter to a value that matches retina displays.

Filter drop-shadow is causing images to blur

This seems to be a bug with the -webkit filters on Retina screens.

Quick fix: Add this to your css file:

img {
    -webkit-transform: translateZ(0);
}

I can't test if it's working, as I don't have a retina screen, but please let me know if it does.

svg not sharp, but blurry

If you want your SVG to be at its sharpest, then design it so that its shapes - especially the horizontal and vertical parts of the shapes - are on pixel boundaries.

For example, compare the following two examples:

<svg width="50" height="50">  <rect x="9.5" y="9.5" width="31" height="31"/></svg>
<svg width="50" height="50">  <rect x="10" y="10" width="30" height="30"/></svg>

SVG gaussian blur in Safari unexpectedly lightens image

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.

---

Related Topics