[Settings] FZ icon isn't smooth at higher DPI

[Jay-o-Way]

ℹ Computer information

• PowerToys version: 29.3
• PowerToy Utility: Settings
• Windows build number: 20H2

📝 Provide detailed reproduction steps (if any)

1. Open Settings -> FancyZones
2. …
3. …

❌ Actual result

Icon isn't smooth, but blurry.
Small thing though.

📷 Screenshots

[niels9001]

@Jay-o-Way does it render properly in the navigation view on the left? Any specific OS scaling settings?

[Jay-o-Way]

The icon in the Nav menu is good.

Earlier image was on my desktop, standard 1920x1080 @ 100%.
The following is on my Surface 2736x1824 @ 200%

[crutkas]

Is this based on using color picker zoom or actual icon? I need a screenshot without using color picker

[enricogior]

[niels9001]

@enricogior It seems that there's some transparency issues going on. Will look into it!

[Jay-o-Way]

Is this based on using color picker zoom or actual icon? I need a screenshot without using color picker

Yes, I used color picker to zoom. But I don't see how that could be causing any change in the (percieved) pixels?

[Jay-o-Way]

I see that the Viewbox is 14×14 px and that doesn't seem "usual". Maybe there is some scaling. The scaling method isn't declared inside the Viewbox element.
Also note that my images look different on different displays. (The first - green background - has 1px thick lines around the edge and the second - orange background - 2px lines)

[niels9001]

@Jay-o-Way Could be that the ViewBox is the cause.. We should remove it and keep the PathIcon (and set it's width / height).

[Jay-o-Way]

I'm not sure yet, but I'm guessing that, because you physically can't draw a line that's narrower than an actual pixel, if (any) scaling is supposed to be done on a subpixel level, it will blend the colors instead. Don't know why that Viewbox is there in the first place?

[niels9001]

I did a test with the a Segoe MDL2 icon.

Rendering as a PathIcon:

Rendering as a FontIcon:

As you can see, icons render way better as a FontIcon. Might make sense to take our vector images and generate a FontIcon for it to see if that solved anything. Will be easier to use as well.

[niels9001]

Using a FontIcon doesn't really improve it..

It basically has to do with the way the pixels are laid out, as @Jay-o-Way mentioned. This was designed however based on E138 (in Segoe MDL2).

To conclude, I think this would require adopting a different pixel grid for the icon to be designed and ideally generate an icon font for it. Quite some work, with little benefit in my opinion..

[Jay-o-Way]

@niels9001

Using a FontIcon doesn't really improve it..

That's because you still have a 1px line straight through the middle. Something that icon ED35 "Apps" (for example) cleverly avoided, although that doesn't count for all icons. Looking at the list from MS, there they render 64x64-pixel images with 4-pixel width lines. Equivalent to 16x16 with 1 pixel lines, but better resolution.

Suggestion 1

Use the same (colored) icon that's also used in OOBE.

Suggestion 2

Maybe a different file type? Create a new 16x16 version or an icon based 64x64? Creating a version with 2px borders and with/without space between the zones?

16x16	32x32	space/thickness?
		with space, 1px borders
		without space, 2px borders

Suggestion 3

Check out (or use) F0E2 "Gridview" or else ED35 "Apps".

This seems like a simple and fair solution to me.

[Aaron-Junker]

Fixed in #12470 and will be integrated in the next major release of PowerToys

[dedavis6797]

Resolved with the release of v0.45.