SVG filter only working when added in style attribute (Firefox)

#svgBlur is a relative URL. It is converted to an absolute URL by prepending the name of the file it is in so

filter: url("#svgBlur");

in your case is really just a shorthand for

filter: url("stylesheet.css#svgBlur");

Which doesn't point to anything.

You need to put the name of the html file in the URL

filter: url("yourhtmlfile.html#svgBlur");

will work. And that's why it works when it's in the html file of course as the prepended filename points to the right place in that case.

My problem that led me here was I had hidden the SVG inside of a div with "display: none" embedded in the class.

It seems to work fine in firefox like so,

HTML

<svg xmlns="http://www.w3.org/2000/svg" height="0">
   <filter height="116%" width="116%" y="-8%" x="-8%" id="svgBlur">
       <feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
   </filter>
</svg>
<div id="page-container">
   <img src="http://miriadna.com/desctopwalls/images/max/Fairy-forest.jpg" alt="forest" />
</div>

JSFIDDLE (with an image in the div)

JSFIDDLE (with a background image on the div)

Did you included the the svg code in your html markup?

I included the svg as a base64 string directly into the css file. This solved my problem.

filter:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0ic3ZnQmx1ciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4=#svgBlur)