0

I've been searching for a solution to give a blur effect to a background for IE10+.

I have found StackBlur and make it worked but it is slow in my case because i have a big background and want to have it rendered as fast as possible.

You know there is a svg filter for blur effect and it works fine when you have a svg content like this one 

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

What i want to do is, take this svg image and use as background image. It must be a css background. I found this fiddle when searching for a solution http://jsfiddle.net/vPA9z/3/ So i assume it is possible but why this is not working http://jsfiddle.net/N2n27/2/

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+"')"
});

I tried to convert the Base64 but still no luck.

dertkw
  • 7,798
  • 5
  • 37
  • 45
user3213174
  • 63
  • 2
  • 9

1 Answers1

0

I believe you need

  1. to encode on the first place the link to image.(use a tool like this one : http://bran.name/dump/data-uri-generator/ )
  2. Use the validator to make sure it is valid http://validator.w3.org/#validate_by_input
  3. Save your svg into a file

  4. then encode the svg file.

    DEMO edit or DEMO full page

Your SVG would become something like this (the linked image is kind of big so i cut it off in this code):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width='331' height='500' id='svgroot' version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<defs><filter id='blur'>
<feGaussianBlur stdDeviation='4' />
</filter>
</defs>
<image filter='url(#blur)' xlink:href='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..... ' height='100%' width='100%'/>
</svg>

and svg turns in : data:image/svg+xml;base64, ...much too long to be there....

You should optimize the image you use cause it is really too big in my humble opinion

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Thank you but this image is a dynamic image, user will select the image for each page. – user3213174 Jun 14 '14 at 23:57
  • If image stands on same domain it might work without encoding it. Just make sure your SVG base is valid . use mine and update xlink . This demo tells you that it works :) – G-Cyrillus Jun 15 '14 at 00:00
  • Something wrong with the base64 output of my svg image both my generated base64 and the generator's you referred. http://jsfiddle.net/N2n27/6/ I'm not sure what is wrong with the svg file, I've replaced xlink:href of yours and saved to computer then used the http://bran.name/dump/data-uri-generator/ but the base64 output not same as yours and not works. Phiff... – user3213174 Jun 15 '14 at 00:46
  • @user3213174 the generator linked is using an html5 api, i'm not expert in javascript, maybe you should use it. http://www.w3.org/TR/FileAPI/#readAsDataURLSync-section – G-Cyrillus Jun 15 '14 at 10:40