Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal: enable styling SVGs in Xaml #507

Open
HppZ opened this issue Mar 29, 2019 · 8 comments
Open

Proposal: enable styling SVGs in Xaml #507

HppZ opened this issue Mar 29, 2019 · 8 comments
Labels
area-Images Images, SVG feature proposal New feature proposal needs-winui-3 Indicates that feature can only be done in WinUI 3.0 or beyond. (needs winui 3) team-Controls Issue for the Controls team

Comments

@HppZ
Copy link

HppZ commented Mar 29, 2019

Proposal: Improve SVG APIs

Summary

SvgImageSource needs dynamically change colors.
as discussed here:
MicrosoftDocs/winrt-api#375

Rationale

Functional Requirements

Important Notes

Open Questions

@HppZ HppZ added the feature proposal New feature proposal label Mar 29, 2019
@verelpode
Copy link

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
Copy link
Author

HppZ commented Apr 8, 2019

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
Copy link
Member

jesbis commented Apr 8, 2019

@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
Copy link

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
Copy link
Member

jesbis commented Apr 26, 2019

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.

@jesbis jesbis changed the title Proposal: Improve SVG APIs Proposal: enable styling SVGs in Xaml Apr 30, 2019
@jesbis jesbis added the area-Images Images, SVG label Apr 30, 2019
@jesbis jesbis removed their assignment May 3, 2019
@ArchieCoder
Copy link

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

@jevansaks jevansaks added the needs-winui-3 Indicates that feature can only be done in WinUI 3.0 or beyond. (needs winui 3) label Jun 13, 2019
@jevansaks jevansaks added the team-Controls Issue for the Controls team label Nov 7, 2019
@hupo376787
Copy link

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
Copy link
Contributor

agneszitte commented Mar 14, 2024

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.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-Images Images, SVG feature proposal New feature proposal needs-winui-3 Indicates that feature can only be done in WinUI 3.0 or beyond. (needs winui 3) team-Controls Issue for the Controls team
Projects
None yet
Development

No branches or pull requests

7 participants