Search code examples
htmlsvguser-experiencesvg-filters

Why svg blur dosen't work in html or browser?

I'm using Figma editor and I tried to blur element, in the editor everything looks fine, then I export it into SVG. I see that there are tags that should make my element blur <feGaussianBlur in="BackgroundImage" stdDeviation="16"/> But it dosen't work, look in the href.

enter image description here

JSFiddle

Dunno why it doesn't work. I also can not find information about it is there HTML reason or the browser.

Solution

  • As Robert says, the main problem is that the generated SVG is using in="BackgroundImage" as an input to the filter. No browsers support that feature AFAIK.

    Instead of trying to blur the image, Figma's approach is to try to blur the background and blend it on top of the picture.

    The filter can be rewritten to avoid using BackgroundImage. You might want to file a bug with Figma about this issue.