Recently, I've been on the hunt for a way to create a blur effect on a background specifically for IE10+. After experimenting with StackBlur, I found that it did work, but unfortunately, it was quite slow due to the size of my background image. I'm looking for a solution that will render the blur effect as quickly as possible.
I came across using an SVG filter for the blur effect which works perfectly when applied to an SVG content like this:
<svg width='331' height='500' id='svgroot'><defs><filter id='blur'><feGaussianBlur stdDeviation='4' data-filterId='1'/></filter></defs><image filter='url(#blur)' xlink:href='http://dpc1.ftcdn.net/jpg/00/65/54/88/500_F_65548876_vDfTzTY0Bq7xVdbJH92kLpPy37FDVF5G.jpg' height='100%' width='100%'/></svg>
My goal is to use this SVG image as a CSS background. Although I stumbled upon a helpful fiddle here showing that it is achievable, I'm encountering issues with getting it to work properly in my own code - demonstrated by this failed attempt: here
var mySVG2 ="<svg width='331' height='500' id='svgroot'><defs><filter id='blur'><feGaussianBlur stdDeviation='4' data-filterId='1'/></filter></defs><image filter='url(#blur)' xlink:href='http://dpc1.ftcdn.net/jpg/00/65/54/88/500_F_65548876_vDfTzTY0Bq7xVdbJH92kLpPy37FDVF5G.jpg' height='100%' width='100%'/></svg>";
var mySVG64 = window.btoa(mySVG2);
$('body').css({
"background-image": "url('data:image/svg+xml;base64,"+mySVG64+"')"
});
Despite attempting to convert to Base64 format, the issue persists and I have yet to find a successful solution.