Switch from `feGaussianBlur` to CSS `filter:blur`

[xerc]

<g filter="url(#prefix__a)"

<g filter="blur(12px)"

ref. https://axe312ger.github.io/sqip/processed/charles-550068-unsplash-sqip.svg

[axe312ger]

Thank you for the suggest, css blur looks better but:

1. browser support is questionable (at least it was a few years ago)
2. it (was) much worse in performance as the svg blur

I am happy to give an option so the user can decide which blur to choose. Maybe we can do some rendering performance testing as well?

[xerc]

1. browser support is questionable (at least it was a few years ago)

true ; not @ IE

2. it (was) much worse in performance as the svg blur

could find any benchmarks from 2k+

I am happy to give an option so the user can decide which blur to choose.

good idea

Maybe we can do some rendering performance testing as well?

@ chromium [120.0.6092.0] filter:blur seems faster (3 reloads)

[axe312ger]

For reference, here is the browser support:

• css blur: https://caniuse.com/mdn-css_types_filter-function_blur
• svg blur: https://caniuse.com/mdn-api_svgelement_blur or https://caniuse.com/mdn-api_svgfegaussianblurelement (not sure 😅)

[axe312ger]

Honestly, support is the same (today!) and IE doesnt support either blur technique is not relevant anymore. Luckily its 2024.

[axe312ger]

It would be really cool if we could change our demo, or make another sub page for each blur with a lot of example images. Then we can render each page multiple times in a controlled environment (some CI) and compare the rendering results.

Based on this, we can give the users some details about the impact on which blur they choose, plus maybe switch to the css blur filter as default