search

swaywm / swaybg

Wallpaper tool for Wayland compositors
MIT License
496 stars 31 forks source link

.svg are poorly rendered #72

Open jlo62 opened 3 months ago

jlo62 commented 3 months ago

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:\ image

same image, but rendered out as png in inkscape:\ bg

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

mstoeckl commented 3 months ago

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 https://github.com/swaywm/swaybg/issues/60 for another issue that would be solved with a special SVG pathway.

jlo62 commented 3 months ago

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 commented 3 months ago

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.