SVG image blur on Firefox

Question

I am trying to blur an image on Firefox using the SVG technique proposed here.

However this very simple example is not working on Firefox (I am version 25) JSFiddle.

HTML

<img class="blur" src="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" />

CSS

.blur {
    filter: url("http://d2oujmlvvb0w9i.cloudfront.net/images/v4/blur.svg#blur")    
} 

Any help?
Thank you

Answer 1

I used this POST for creating blur effect but I added coding base64.

img.blur { 
    filter: blur(3px);
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPGZpbHRlciBpZD0iYmx1ciI+DQoJCTxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjMiIC8+DQoJPC9maWx0ZXI+DQo8L3N2Zz4=#blur);
}

DEMO

Code for SVG file

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
        <feGaussianBlur stdDeviation="3" />
    </filter>
</svg>

Answer 2

Firefox does not support cross origin filters for HTML content. From the relevant blog post:

The SVG elements being used for clipping, masking, and so forth can be loaded from an external document, as long as that document comes from the same origin as the HTML document to which it's applied.