.svg are poorly rendered

[jlo62]

Hi, the gradients in svg files are rendered poorly.
A workaround is to render them as png, but then it's size increases drastically (e.g. 10kb to 1.4mb (for 2.2K) or 2.1mb (for 4k) ), and it isn't really editable, so I have to keep the old (svg) copy around.

tip: The closer in you zoom, the worse you can see the difference.

Wallpaper with svg:

same image, but rendered out as png in inkscape:

the source file (firefox/github(?) also renders it poorly, but not that bad):

[mstoeckl]

This issue is known as color banding, and there are two main approaches to solving it: using dithering on the image (which Inkscape currently when it renders a PNG), or displaying the image at higher bit depth (which, to avoid banding either requires a monitor which supports it, or for Sway to do the dithering itself.)

Implementing either option inside Swaybg would require specific SVG processing that the current image loader, GdkPixbuf, does not support. See #60 for another issue that would be solved with a special SVG pathway.

[jlo62]

Is this like mixing pixels from one of the color and the other color to make a gradient in a gradient?

So we would need a whole new svg renderer (or a library)?

[mstoeckl]

Is this like mixing pixels from one of the color and the other color to make a gradient in a gradient?

Yes, see https://en.wikipedia.org/wiki/Dither .

So we would need a whole new svg renderer (or a library)?

swaybg would need to explicitly use librsvg; there's an experimental branch mentioned in #60 , mstoeckl/svg-direct which does this, and enabling dithering on top of that would not be too much work. Technically, it isn't a new renderer, because I believe GdkPixbuf uses librsvg itself anyway.