Why Is Filter(Drop-Shadow) Causing My Svg to Disappear in Safari

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 disappears on Safari because of drop-shadow

You have an error in your SVG code: missing closing "g" tag.

Update: 1 (manual)

You can make a duplicate of your path and apply a "blur" filter on it.

Here's a complete example, copy + paste into new file, save & open in your web browser:

<svg
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="1517"
    height="404"
    viewBox="0 0 1517 404">

    <defs>
        <filter id="fltBlur">
            <feGaussianBlur stdDeviation="5" />
        </filter>
    </defs>

    <g id="Page-1" style="fill:none;stroke:#94ff51;stroke-width:3">
        <path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0" />
        <path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0"
        style="filter:url(#fltBlur)" />
    </g>

</svg>

You can also use JavaScript to dynamically do this (on the fly) without having to manually copy & apply filters.

Update: 2 (auto) - full example HTML + SVG + JavaScript

<html>
    <head></head>
    <body>

        <svg id="svgDoc" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1517" height="404" viewBox="0 0 1517 404" style="background:#323436">
            <defs>
                <filter id="glow0">
                    <feGaussianBlur stdDeviation="0" />
                </filter>
            </defs>
            <g id="line1" style="fill:none;stroke:#94ff51;stroke-width:3">
                <path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0" />
            </g>
        </svg>             

        <script>
            var glow = function(noid, size, tint, opac)
            {
                var root, temp, defs, glow, node, copy, home;

                this.incr += 1;

                root = document.getElementById('svgDoc');
                temp = document.createElement('svg');
                node = root.getElementById(noid);
                copy = node.cloneNode(true);
                home = node.parentNode;
                defs = root.getElementsByTagName('defs')[0];
                glow = root.getElementById('glow0').cloneNode(true);

                size = (size || 1);
                tint = (tint || '#000000');
                opac = (opac || 1);

                glow.id = ('glow'+ this.incr);
                glow.innerHTML = (glow.innerHTML.split('Deviation="0"').join('Deviation="'+size+'"'));
                defs.appendChild(glow);

                copy.style.filter = 'url(#'+glow.id+')';
                copy.style[((copy.style.fill != 'none') ? 'fill' : 'stroke')] = tint;
                copy.style.opacity = opac;

                home.removeChild(node);
                home.appendChild(copy);
                home.appendChild(node);
            }
            .bind({incr:0});


        // -----------------------------------
            glow('line1', 3, '#94ff51', 0.7);  // This line does it!
        // -----------------------------------

        </script>

    </body>
</html>

Here is a preview (partial screenshot):
code result

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.

Inline SVG disappears in iOSand Safari when a CSS filter is applied

Annoying that this doesn't work, but Safari is the new IE after all! :P

A workaround is to wrap the SVG in another element and apply the filter to that.

Using SVG feTurbulence as a filter causes odd rendering issues in Safari

Robert is right, you should report this bug.

However, there seems to be a simple workaround:

Forcing your filtered element to have it's own layer apparently makes the bug disappear: (only tested with transform, maybe my explanation is off).

body {  width: 100vw;  height: 100vw;  background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%);  padding: 1%;  overflow: hidden;}
#cloud-circle {    width: 500px;    height: 275px;    border-radius: 50%;    filter: url(#filter);    box-shadow: 400px 400px 60px 0px #fff;    position: absolute;    top: -320px;    left: -320px;    /* Safari workaround */    transform: translateZ(0);}

<div id="cloud-circle"></div>  <svg width="0" height="0">     <filter id="filter">      <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />      <feDisplacementMap in="SourceGraphic" scale="180" />    </filter></svg></div>

How can I prevent CSS gradient banding?

I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.

If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.

If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.

In Adobe Fireworks, I would export this as a PNG-24.

Good luck.

http://codepen.io/anon/pen/JdEjWm

#gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
  background: -webkit-linear-gradient(top, black, white);
  background: -moz-linear-gradient(top, black, white);
  background: -ms-linear-gradient(top, black, white);
  background: -o-linear-gradient(top, black, white);
  background: linear-gradient(top, black, white);
}

Why Is Filter(Drop-Shadow) Causing My Svg to Disappear in Safari