Bug 136211 - SVG icons are blurred on HiDPI screen
Summary: SVG icons are blurred on HiDPI screen
Status: RESOLVED NOTABUG
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: UI (show other bugs)
Version:
(earliest affected)
7.0.0.3 release
Hardware: All Windows (All)
: medium normal
Assignee: Not Assigned
URL:
Whiteboard:
Keywords:
Depends on:
Blocks: HiDPI
  Show dependency treegraph
 
Reported: 2020-08-28 01:44 UTC by Stéphane Guillou (stragu)
Modified: 2020-09-12 06:55 UTC (History)
3 users (show)

See Also:
Crash report or crash signature:


Attachments
PNG Colibre with Skia: clean (30.91 KB, image/png)
2020-08-28 01:49 UTC, Stéphane Guillou (stragu)
Details
SVG Colibre with Skia: blurry (32.59 KB, image/png)
2020-08-28 01:50 UTC, Stéphane Guillou (stragu)
Details
SVG Colibre without Skia: better (30.77 KB, image/png)
2020-08-28 01:50 UTC, Stéphane Guillou (stragu)
Details
LO 7.0 toolbar icons with Colibre theme (35.85 KB, image/png)
2020-09-01 16:03 UTC, Roland Baudin
Details
LO 7.0 toolbar icons with Colibre SVG theme (39.72 KB, image/png)
2020-09-01 16:03 UTC, Roland Baudin
Details
LO 6.4.5 TexMaths SVG icons (44.59 KB, image/png)
2020-09-01 16:04 UTC, Roland Baudin
Details
LO 7.0 TexMaths SVG icons (36.54 KB, image/png)
2020-09-01 16:04 UTC, Roland Baudin
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Stéphane Guillou (stragu) 2020-08-28 01:44:26 UTC
Description:
(this is a more precise and updated re-write of my previous messy, confusing report, Bug 131946)

On HiDPI screens, with scaling at 100%, and Windows 10's default scaling settings, SVG icons are blurred but PNG icons are crisp. Turning Skia off improves the situation (more or less depending on the icon set).

Steps to Reproduce:
1. Make sure the "Program File\LibreOffice\program\soffice.exe" binary has the option "Properties > Compatibility > Change High DPI settings > High DPI scaling override" _not_ ticked (the default, I believe)
2. In the same dialogue, click on "Open advanced scaling settings" and make sure "Fix scaling for apps" is On (the default, I believe)
3. Make sure display is / displays are at 100% scale (Windows' "System Settings > Display")
4. Open a LibreOffice application (e.g. Writer)
5. Go to Tools > Options > View
6. Change icon style to the original "Colibre" and apply: icons are not blurred
7. Change icon style to "Colibre (SVG)" and apply: icons are blurred
8. In the same dialogue, turn Skia off, restart LibreOffice as prompted, and see the improved result.


Actual Results:
SVG icons (regardless of the set) are blurred, but PNG icons are crisp.

Expected Results:
SVG icons should be clear and crisp.


Reproducible: Always


User Profile Reset: No



Additional Info:
System details:

Version: 7.0.0.3 (x64)
Build ID: 8061b3e9204bef6b321a21033174034a5e2ea88e
CPU threads: 8; OS: Windows 10.0 Build 18363; UI render: Skia/Vulkan; VCL: win
Locale: en-AU (en_AU); UI: en-US
Calc: threaded

And when Skia is off:

Version: 7.0.0.3 (x64)
Build ID: 8061b3e9204bef6b321a21033174034a5e2ea88e
CPU threads: 8; OS: Windows 10.0 Build 18363; UI render: default; VCL: win
Locale: en-AU (en_AU); UI: en-US
Calc: threaded
Comment 1 Stéphane Guillou (stragu) 2020-08-28 01:49:33 UTC
Created attachment 164778 [details]
PNG Colibre with Skia: clean
Comment 2 Stéphane Guillou (stragu) 2020-08-28 01:50:01 UTC
Created attachment 164779 [details]
SVG Colibre with Skia: blurry
Comment 3 Stéphane Guillou (stragu) 2020-08-28 01:50:35 UTC
Created attachment 164780 [details]
SVG Colibre without Skia: better
Comment 4 Roland Baudin 2020-09-01 16:02:02 UTC
I'm not sure the problem is related to Skia, because I'm on Linux and I see the same problem.

Here are two examples of screenshots:

- colibre.png (LO 7.0 toolbars with Colibre icons)
- colibre-svg.png (LO 7.0 toolbars with Colibre SVG icons)

- TexMaths-LO-6.4.5.png (TexMaths SVG icons with LO 6.4.5)
- TexMaths-LO-7.0.png (TexMaths SVG icons with LO 7.0)

(TexMaths extension here: https://extensions.libreoffice.org/en/extensions/show/texmaths-1)

As you can see, the rendering of SVG icons in LO 7.0 is wrong. IMHO, it looks like an antialiasing problem...

My system: Ubuntu 20.04.1 LTS 64 bits
My screen resolution: 2560 x 1440
Comment 5 Roland Baudin 2020-09-01 16:03:01 UTC
Created attachment 164972 [details]
LO 7.0 toolbar icons with Colibre theme
Comment 6 Roland Baudin 2020-09-01 16:03:34 UTC
Created attachment 164973 [details]
LO 7.0 toolbar icons with Colibre SVG theme
Comment 7 Roland Baudin 2020-09-01 16:04:01 UTC
Created attachment 164974 [details]
LO 6.4.5 TexMaths SVG icons
Comment 8 Roland Baudin 2020-09-01 16:04:27 UTC
Created attachment 164975 [details]
LO 7.0 TexMaths SVG icons
Comment 9 Roland Baudin 2020-09-03 12:12:04 UTC
Bug is still there in LibreOffice 7.0.1.2.
Comment 10 V Stuart Foote 2020-09-08 20:22:13 UTC
All icons are rendered from PNG, what is different is that the PNG icons for use through 150% are bundled. As are the icons in SVG.

As the scale of the UI is increased, a new set of the selected icon theme (PNG or SVG) is rendered internal to LibreOffice as scaled PNG held in user cache for that theme by scale value.

Point is when using the SVG icons at a 100% UI scaling the icons are actually being down sampled to fit the icon size needed for that scale.  They will ALWAYS look blurry.  They start to improve when UI is scaled to ~175%, and by 225% there is no comparison to the PNG theme icons which are horribly pixelated when scaled upward for use.

Skia, GDI default, or OpenGL rendering have NO impact on the function of scaling up or down the SVG into PNG icon sets.

In other words, this is not a bug!

You can not use the SVG icon themes at UI scales below ~150%, they look horrible/fuzzy bcz of resampling.
Comment 11 Stéphane Guillou (stragu) 2020-09-09 12:12:31 UTC
Stuart, could you please direct us to the relevant bug report that tracks the issue of SVGs being resampled? I thought the whole idea of using SVG icons is that they would nice at any size / zoom level, because they are vector graphics, so I assume there is a bug report somewhere that talks about how we should fix that.

How do other programs manage to have a crisp interface at any zoom level?
Comment 12 V Stuart Foote 2020-09-09 15:15:24 UTC
(In reply to stragu from comment #11)
> Stuart, could you please direct us to the relevant bug report that tracks
> the issue of SVGs being resampled? I thought the whole idea of using SVG
> icons is that they would nice at any size / zoom level, because they are
> vector graphics, so I assume there is a bug report somewhere that talks
> about how we should fix that.
> 

bug 115439 and its see alsos--but no fix is required!

We do not use SVG icon themes natively within the VCL for building the LO UI--*only* PNG.  Selection of an SVG icon theme package requires that all SVG of the theme be rasterized in bulk to PNG icons of suitable size to fit the os Desktop scale and rendering of the LO UI. Performance and quality of the SVG rasterization is an ongoing discussion.

Simple fact is that at 100% os Desktop scale, the SVG rasterzation to PNG is lossy.  While with HiDPI and os Desktop scaling of 200% - 400% the SVG rasterization to PNG has high fidelity to the original SVG, while bundled PNG are pixelated when scaled to larger size.

In packaging the PNG icon themes, the project already does the rasterization and cleanup of the PNG icons in their Small - sc_ 16x16, Large -- lc_24x24, and Extra large -- 32 32x32px bitmaps.

Absent native use of SVG icon themes in VCL, this SVG icon rasterization in bulk on launch support HiDPI use at os Desktop scaling above 150%.  Lower scaling values, just continue to use the PNG icon themes -- they have the same source!
Comment 13 Stéphane Guillou (stragu) 2020-09-12 06:03:24 UTC
Thanks Stuart, and sorry I am having trouble understanding the whole issue, but maybe a more straight-forward question is: how can LibreOffice have a clean, crisp interface at all Zoom levels? i.e., how do other programs do it? And what future LO development might make the situation better?
Because, surely, the current state cannot be considered to be good enough. Or do you really mean by "no fix is required" that the current situation is fine?
Comment 14 V Stuart Foote 2020-09-12 06:55:49 UTC
(In reply to stragu from comment #13)
> ...
> Because, surely, the current state cannot be considered to be good enough.
> Or do you really mean by "no fix is required" that the current situation is
> fine?

I do. The pre-built PNG icon sets 16px, 24px, 32px (and a smattering at higher res) are clean and crisp 'out of the box' for resolutions < 125%

Those same PNG icons, when scaled, will look pixelated.

Project has made an effort to package SVG versions of the icons, which are ideal for os/DE scaling > 150%  They are not intended to be used at 100% UI scale as the necessary rasterization makes for ugly icons. They scale with the UI correctly, and look good.

Easy to prove, clear user cache, enable an SVG icon theme, and then scale the os/DE--the SVG icon theme will be rasterized as a set into clean scaled icons (as PNG which the UI still requires).

There is a very real issue as in bug 126446--NOT OUR BUG--on Windows bcz of functional difference between simple UI scale presets and custom scaling. Simple UI scaling is from the Desktop context -> Display Settings -> Scale and Layout that gives a listbox of simple scale presets. 

As compared to the MS Windows 'Advanced Scaling Settings' dialog with its 'Custom scaling' entry field 100% - 500%. They behave differently, and LibreOffice UI scaling results differ.

The simple listbox UI scaling applies immediately, warning some apps won't respond 'til logoff/on--but even then may not trigger LibreOffice's bulk rasterization of the icon theme. The 100% icons end displayed on a screen scaled e.g. to 175% or 200%.

On the other hand, setting the 'Custom scaling' value, which requires an os/DE logoff, will always cause LibreOffice launch to resample the icon theme into a new set of PNG icons at scale. The PNG icon themes get pixelated, but when an SVG icon theme had been selected--the scaled SVG icons are the crisp clean icons needed for HiDPI UI resolutions.