Proposal: enable styling SVGs in Xaml

[HppZ]

Proposal: Improve SVG APIs

Summary

SvgImageSource needs dynamically change colors. as discussed here: https://github.com/MicrosoftDocs/winrt-api/issues/375

Rationale

Functional Requirements

Important Notes

Open Questions

[verelpode]

I guess that @HppZ would like to use a SVG file in a manner similar to setting Path.Data along with setting Path.Fill to the desired brush/color. In other words, the ability to convert an SVG file to a Geometry that can be assigned to Path.Data, thereby allowing the brush/color to be dynamically changed at any time by changing Path.Fill.

For example, consider an SVG file that should be used as an icon for a button. Thus the icon/symbol should change color depending on the state of the button (pressed, disabled, hover, etc).

I agree that it would be great to be able to use SVG files as icons for buttons or as symbols for other parts of the GUI. Thus both "colored" and "colorless" SVG files are quite useful in different situations.

[HppZ]

Yes, I would like to use a SVG in a Button style so that I don't need three images (normal pressed hover). and no more scaled assets needed.

[jesbis]

@HppZ, @verelpode do you have any thoughts on which of these would be most useful:

1. Ability to convert an svg document to a Xaml Geometry
2. Ability to convert an svg document to a Win2D or Windows.UI.Composition geometry/shape
3. Ability to apply Xaml styles to svg elements in an SvgImageSource (e.g. similar to styling svg elements with CSS classes)

?

[verelpode]

Considering that we both thought of using SVG files/resources as icons for buttons or as other symbols in the GUI, and considering that buttons are normally composed of Xaml elements, then I think the most useful ability is to convert SVG to Xaml Geometry (not CompositionGeometry) and assign it to Path.Data. Importantly, this also makes it compatible with Windows.UI.Xaml.Controls.PathIcon.Data, whereas CompositionGeometry cannot be assigned to PathIcon.Data.

Re the third option, that may be impressively advanced but overkill; too much work. The simpler solution of converting an SVG to Xaml Geometry would make it easier to use an SVG as an symbol for use with PathIcon.Data or Path.Data.

[jesbis]

Thanks for the suggestion and details! I agree this would be a useful feature given how common SVG is. We won't be able to get to this in the current release but we'll keep this issue in the backlog for the future.

[ArchieCoder]

I was searching how to do this until I find out this thread :(

For reference iOS/Android, we can do it. Swift way: https://stackoverflow.com/questions/19274789/how-can-i-change-image-tintcolor-in-ios-and-watchkit

[hupo376787]

For svg style, we can use Glyphter to convert svg to font file, and do whatever we want. We can't rely on MS, we have to find tools online.

[agneszitte]

Are there any future plans for this proposal?

To provide more context, consider this example where I'm using this colored SVG below using styling properties:

<Image Source="ms-appx:///SvgSampleApp/Assets/unoplatformlogo.svg"
       Height="80"
       Width="80" />

Unfortunately, it is displaying as a solid black SVG on Windows because WinUI currently does not support SVG styling. The colored SVG displays correctly on all other platforms supported by Uno Platform, but the results on Windows do not meet the same expectations.