Projectreunion: Modern icon scaling for packaged applications

Created on 28 Dec 2020 · 7Comments · Source: microsoft/ProjectReunion

Proposal: Modern icon scaling for packaged apps

Summary

A new icon and scaling system for packaged applications. Adding to the current system, this would use one SVG for each tile size instead of creating multiple images scaled at different sizes. SVGs are scalable by nature, and are a perfect alternative to the current method of asset scaling.

Additionally, the "recommended padding" that is used when Visual Studio is given an icon should be applied and managed by the system.

Rationale

Today, creating icon / tile assets for packaged applications means creating _many_ images, often duplicated at different sizes. Any customization to this makes for a long and arduous process for developers.
Using a single, scalable image for app icons means the system can apply a consistent padding using the tile, rather than relying on the image itself. This has two advantages:
- Consistency. The default padding is often overridden unnecessarily by the developer, creating minor inconsistencies in tiles across apps, and having the system add the padding fixes this.
- Future customization. Having a full sized image as the source for a tile is not flexible, and is surely a blocker for even simple customization on the tiles themselves. This system *could* potentially open the door to a Windows flavor of the Adaptive Icons system found in Android.
For apps with a small codebase, assets can take up more space than the code. Using SVGs to scale a handful of icons is efficient and reduces bundle size.

Example output of the current asset system:

Scope

Open Questions

If a system like this is implemented, should it really work alongside the old system? This was proposed to accommodate games that display very high details images instead of simple shapes in their tiles.

area-Resources feature proposal

Source

Arlodotexe

👍9

Most helpful comment

A single SVG may not be suitable as smaller icons often use altered designs to reduce detail and better suit the smaller rendering.

There should be a way to create a few SVGs or PNGs, and then apply them to multiple assets, where the SVG will scale, or the packaging process can auto-generate the smaller PNGs.

There should also be auto-generation of shadows to match the ThemeShadows used by WinUI and the Windows Shell

_An example of different SVG Icons for different scales_

mdtauk on 28 Dec 2020

👍5

All 7 comments

A single SVG may not be suitable as smaller icons often use altered designs to reduce detail and better suit the smaller rendering.

There should be a way to create a few SVGs or PNGs, and then apply them to multiple assets, where the SVG will scale, or the packaging process can auto-generate the smaller PNGs.

There should also be auto-generation of shadows to match the ThemeShadows used by WinUI and the Windows Shell

_An example of different SVG Icons for different scales_

mdtauk on 28 Dec 2020

👍5

This seems to be covered (in spirit) by https://github.com/microsoft/microsoft-ui-xaml/issues/3561.

Felix-Dev on 28 Dec 2020

This seems to be covered (in spirit) by microsoft/microsoft-ui-xaml#3561.

I do believe it should be tackled at the Reunion level, so Win32/WPF/Winforms/WinUI can all have a single approach for handling this.

It may also require some backporting work for Windows 8, and maybe even an ICO generator for older Windows compatiblity.

mdtauk on 28 Dec 2020

That's why I added "in spirit" since in essence, both issues ask for SVG support to generate the required icons for (packaged) applications in the Windows Shell/app UI. Instead of having two such issues, ideally, we would consolidate both issues into one. And if that means https://github.com/microsoft/microsoft-ui-xaml/issues/3561 should be slightly edited (to cover more apps other than just WinUI apps) and moved back into Project Reunion (the author of that issue originally created it in the Project Reunion repo), then I'm all for it.

Felix-Dev on 28 Dec 2020

👍2

Personally, I only generate a huge PNG for 400% DPI and let the system downscale for the rest, because otherwise those assets are 90% of my package size, which is plain ridiculous.

sylveon on 31 Dec 2020

I agree with @Felix-Dev . @Arlodotexe , can you take a look at microsoft/microsoft-ui-xaml#3561? If we need to broaden that issue, we can bring it back here.