SVG feGaussianBlur producing noticeable banding & edges

Question

I'm working on some generative art using SVG. The one thing I noticed that SVG feGaussianBlur filter produces ugly result for nearest colors. E.g.:

<svg viewBox="0 0 512 512" width="512" height="512">
<defs>
 <filter id="blur-1" filterUnits="userSpaceOnUse">
  <feGaussianBlur edgeMode="none" in="SourceGraphic" stdDeviation="40" />
 </filter>
</defs>
<rect x="0" y="0" width="512" height="512" fill="#333" />
<circle cx="256" cy="256" r="128" fill="#444" filter="url(#blur-1)" />
</svg>

Produces strange results around the edges of blurred area. Looking for a way to fix this.

<svg viewBox="0 0 512 512" width="512" height="512">
<defs>
 <filter id="blur-1" filterUnits="userSpaceOnUse">
  <feGaussianBlur   edgeMode="none" in="SourceGraphic" stdDeviation="40" />
 </filter>
</defs>
<rect x="0" y="0" width="512" height="512" fill="#111" />
<circle cx="256" cy="256" r="128" fill="#222" filter="url(#blur-1)" />
</svg>

See rendered result

Answer 1

The banding that you're seeing (on Windows only probably) is due to Windows graphics API's doing a crappy job of dithering for larger blurs when the color space is linearRGB. If you add

color-interpolation-filters="sRGB" to your filter element you'll get a smooth blur.