css - 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>