Support background blur in SVGs exported from Figma
<svg width="367" height="255" viewBox="0 0 367 255" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="150.75" y="18.5726" width="216" height="216.897" fill="#7580FF"/>
<foreignObject x="-51.0876" y="-51.0876" width="356.218" height="356.218"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(25.54px);clip-path:url(#bgblur_0_1_16_clip_path);height:100%;width:100%"></div></foreignObject><circle data-figma-bg-blur-radius="51.0876" cx="127.021" cy="127.021" r="127.021" fill="#FF7575" fill-opacity="0.7"/>
<defs>
<clipPath id="bgblur_0_1_16_clip_path" transform="translate(51.0876 51.0876)"><circle cx="127.021" cy="127.021" r="127.021"/>
</clipPath></defs>
</svg>
(I'm sympathetic that general <foreignObject> support is nigh impossible 🙂 Figma uses this only for background blurs and angular gradients)
Lauren
shared this idea
-
A dedicated request about background blur: http://illustrator.uservoice.com/forums/333657/suggestions/36614008
-
Lauren
commented
Example SVG (as exported from Figma with a simple layer blur):
```
<svg width="298" height="298" viewBox="0 0 298 298" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_1_3)">
<circle cx="148.796" cy="148.796" r="127.021" fill="#FF7575"/>
</g>
<defs>
<filter id="filter0_f_1_3" x="-5.72205e-06" y="1.90735e-06" width="297.592" height="297.592" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="10.8875" result="effect1_foregroundBlur_1_3"/>
</filter>
</defs>
</svg>
```It still does not work if I reduce the filter to only a single `feGaussianBlur` (though this does not match Figma output fwiw):
```
<svg width="298" height="298" viewBox="0 0 298 298" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_1_3)">
<circle cx="148.796" cy="148.796" r="127.021" fill="#FF7575"/>
</g>
<defs>
<filter id="filter0_f_1_3" x="-5.72205e-06" y="1.90735e-06" width="297.592" height="297.592" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="10.8875" result="effect1_foregroundBlur_1_3"/>
</filter>
</defs>
</svg>
```
