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

Question

I added a blur effect svg to my HTML(text/html): ``` ... ... ``` Which I reference to in my CSS sheet: ``` #page-container { filter: url("#svgBlur"); -webkit-filter: blur(8px); } ``` Doing this makes the #page-container appear white (FF doesn't recognize the SVG filter). The funky part: When I disable the above filter rule in Firebug and readd it in the style attribute of the #page-container, it works like a charm. ```

``` What am I overseeing? Response headers: ``` Cache-Control no-cache, must-revalidate, post-check=0, pre-check=0 Connection Keep-Alive Content-Encoding gzip Content-Language nl Content-Length 6098 Content-Type text/html; charset=utf-8 Date Mon, 02 Dec 2013 14:47:01 GMT Etag "13859956…

Accepted Answer

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)
```

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

Solution

Problem