Microsoft-ui-xaml: 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?