In the fourth part, I make comparisons between browsers and pixel ratios.
Pixel ratio
Different pixel ratios can cause the SVG to render differently depending on the browser.
Tests were executed on macOS 11.7.
Chrome 106.0.5249.119
Chrome renders filters similarly in both pixel ratios, but the colors change slightly.
Chrome 1x
Chrome 2x
Firefox 105.0.3
At both pixel aspect ratios, Firefox renders the blur filter a little stronger than Chrome. Colors don't seem to change from one pixel ratio to another.
Firefox 1x
Firefox 2x
Safari 16.0
At 1x, Safari renders the blur filter even stronger than Firefox. At 2x, the rendering is very similar to Chrome. Colors don't seem to change from one pixel ratio to another.
Safari 1x
Safari 2x
Conclusion
As far as I know, there is no way to set filter values according to screen pixel ratio unless JavaScript is added.
That way, I just set filter values that make the SVG render similarly in different browsers and pixel ratios.
In the final post, I write my final thoughts: Conclusion GOOD MOOD: SVG animation.