How to force an image displayed with SVG element to cover the entire width and height

Question

I have generated a blurred image using svg element. I want it to cover the entire width and height of the screen.

Now to better understand I am providing tw

Answer 1

If you know the dimensions of the image ahead of time, you can use the viewBox and preserveAspectRatio SVG attributes and skip the JavaScript altogether. In my fiddle it appears that you have to specify the image's width and height explicitly as well for this to work.

Another option is to specify the image as the SVG element's background in CSS, blurring with the filter property.