Proposal: Use vector graphics for Windows WinUI app icons

[SetTrend]

Proposal: Use vector graphics for Windows WinUI/UWP app icons

Summary

The process of publishing an app to the Microsoft Store is accompanied by publishing loads of raster images to be displayed in Windows and the MS Store.

Although Visual Studio 2019 comes with a feature to generate a plethora of raster images from a vector graphics file, it would make more sense to publish just the vectorized image itself and have subscribers, like MS Store or Windows OS, display and scale the vector image on the fly.

Instead of dozens of raster images, only one, or up to a handful of, vector images (i.e. SVG) should be provided with the app. Tags in the app manifest could then declare which of the provided vector images should be used for which purpose (e.g. splash screen, Store logo etc.).

Rationale

Currently ...

• Maintaining dozens of icons in a project is unhandy
• Particular rasterized icons in a project may become obsolete because no-one ever checks all the different versions for being current
• Icons can hardly be scaled to anything else but the provided sizes
• MS Store must hold all the raster images available
• Windows must hold all the raster images available

In general, it would be much easier to just store the icons as vector graphics and have Windows scale the vector graphic icons appropriately on the fly.

Taken from : App icons and logos - UWP applications

[stevewri]

So WinUI supports SVG images, so an app that uses WinUI should be able to render SVG content at the right scale factor in application rendering contexts. But the shell can't consume those resources for visuals like Start and the taskbar, etc. This isn't a Reunion issue per se, but it's a good WinUI/Shell integration ask. Let me see if there's a better home for it.

[jonwis]

There's also an opportunity here to have the package build tooling take an SVG asset and automatically produce the assets at the required scaling, at least as an intermediate step.

[mdtauk]

There's also an opportunity here to have the package build tooling take an SVG asset and automatically produce the assets at the required scaling, at least as an intermediate step.

It should be possible to load in multiple SVGs which have been designed for specific scale factors, and let those vector images fill in some of the intermediate sizes.

[SetTrend]

From what I believe, the most important part here is to enable Windows shell to handle SVG images.

[SetTrend]

Things could even be more streamlined by utilizing CSS media queries in the SVG file for light, dark and highContrast modes:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100">
<style type="text/css">
  @media (prefers-color-scheme: light)
  {
    .myColor
    {
      fill: #224F99;
    }
  }
  @media (prefers-color-scheme: dark)
  {
    .myColor
    {
      fill: #99224F;
    }
  }
</style>
<path class="myColor" d="M50,0C22.4,0,0,22.4,0,50c0,27.6,22.4,50,50,50s50-22.4,50-50C100,22.4,77.6,0,50,0z
  M82.7,65.8 c-7.1,13.4-21,21.7-36.2,21.7c-11,0-21.2-4.3-29-12c-2.3-2.3-2.3-6.1,0-8.5c2.3-2.3,6.1-2.3,8.5,0c5.5,5.5,12.8,8.5,20.5,8.5
  c10.7,0,20.6-5.9,25.6-15.4c1.6-2.9,5.2-4,8.1-2.5C83.2,59.2,84.3,62.8,82.7,65.8z"/>
</svg>

Utilizing this technique, theming would be a snap, and a single SGV file could basically handle all of an app's requirements.

[stevewri]

WinUI folks - this is something that would require shell work (since it's start menu et al. that need to be able to consume SVG icons). Are you better poised to drive this with shell?

[StephenLPeters]

I think there are 3 pieces here. One on the UWP packaging team to package SVG's as your app image, One on shell to handle displaying SVG's in the task bar and file explorer (and other places). And (potentially one on xaml to support svg's in icons which we have a proposal for here: #3323 @bschoepke fyi

[StephenLPeters]

@jevansaks could you help with looping in the right people?

[EricOuellet2]

SVG should be the standard for over a decade now. It is now supported natively for few years now in the OS (directx, Direct 2D). That should be the standard for icons but also it should be better supported either as converting to native C# drawing graphics and being able to interact with it.

[SetTrend]

Out of curiosity: Has the SVG standard been adapted by the MS Windows team for upcoming Windows 11 icons, so this issue may anticipate implementation in Visual Studio 2022 project templates?

[sylveon]

No, the new Settings app still uses images:

[SetTrend]

Thanks for enlightening me.

I guess the Windows team was busy finishing more important tasks, like ...

Windows 11 features a clean design with rounded corners, pastel shades and a centered Start menu and Taskbar.

First things first.

[humbertomoli99]

for now what you have to do is use the pakage.appmanifest and upload the images in different sizes but not in svg but in png

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[SetTrend]

Any news on this yet?

[Diegorro98]

Some months ago I asked two questions about this topic at WinUI Community Calls: #8381 (comment)
@ryandemopoulos answered this and the following:

We did briefly look at this, @Diegorro98 , although we didn't really do an in-depth exploration/consideration.

SVG is a huge spec, and XAML Paths are great but certainly not as sophisticated as SVG; no doubt some iconography could be achieved with XAML Paths, and I'm guessing some things can't be done -- again, we didn't go super deep in considering this. The main reason we didn't explore deeply is just pragmatism: there are tens of thousands of icons in Windows, all in rasterized formats, and even if we have 100% SVG capability + amazing XAML Path support, converting all those just wouldn't have been worth the investment. So we dropped the consideration.

I never answered to that, But after some time I've been thinking that maybe there is no need to convert all the icons right now, maybe vector graphics and png can coexist (just like many things at Windows, i.e. Configuration and Control Panel)

[SetTrend]

But after some time I've been thinking that maybe there is no need to convert all the icons right now, maybe vector graphics and png can coexist (just like many things at Windows, i.e. Configuration and Control Panel)

Absolutely. That would have been my first thought, too.

SVG comes with an image element. And even if it wouldn't, there's still CSS to use for rasterized images as background color.

[mdtauk]

Perhaps SVG support in the system can be extended to allow for using Xaml brushes instead of the static hard coded hex colours within the SVG code?

[sylveon]

Or just keep the PNG support? No need to fully remove it

[Diegorro98]

Or just keep the PNG support? No need to fully remove it

@sylveon no one said PNG support should be removed, in fact there is no way to stop supporting PNG as long as there is support for old windows programs. Aside from that, there isn't a good reason to remove it and they can coexist perfectly.

[MPITech]

We were going to start rewriting our huge WinForms application with DevExpress controls that have used SVG icons for a decade or more now. We were going to go with WinUI3 and are pretty shocked that it doesn't natively support SVG icons easily like you can with font and PNG resources. With the wide variety of resolutions and DPI scaling on our customers' computers, SVG is a must for us. Why is it so difficult in WinUI3?