Blur on multiple browsers

HTML

<svg height="200px" width="300px">
  <defs>
     <filter id="blur" >
       <feGaussianBlur stdDeviation="3" />
     </filter>
  </defs>
  <image filter="url(#blur)" xlink:href="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" height="200px" width="300px"></image>
</svg>   
  
  
  <img class="css-blur" src="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" alt=""/>

CSS

.ie-only-blur {
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}

.css-blur {
  -webkit-filter: blur(3px); 
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);
}

.svg-only-blur {
  filter: url(#blur); 
}

.all-blur {
 -webkit-filter: blur(3px); 
 -moz-filter: blur(3px);
 -ms-filter: blur(3px);
 -o-filter: blur(3px);
 filter: blur(3px);
 filter: url(#blur);   
 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}