Skip to content

Gradient Banding

Gradients suffer from banding, both during editing and (more important) on PNG exports. The banding becomes apparent with gradients over narrow ranges.

I tried several ways to get from (Inkscape's) SVG to PNG and in the end found only one option that gets it right: Chromium. Source SVG and resulting PNGs attached.

There's a relevant bug report back from 2008: https://bugs.launchpad.net/inkscape/+bug/180693

SVG: gradient_test_01.svg

Inkscape export (8bit per channel PNG):

gradient_test_01_inkscape

Chromium, via clipboard (8bit per channel PNG):

gradient_test_01_chromium

Edited by Nathan Lee
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information