2

I'm trying to create some scalable buttons in a WinUI application using svg files. I've achieved this at the moment using an image control as the button's context, similar to the below:

<Button Name="MyButton">
    <Image Source="Path/To/My/Image.svg"/>
</Button>

The svgs are simple black and white images, but I would like to change the stroke color based on the current application theme. Is there a way to do this which doesn't involve creating a separate set of DarkMode svgs?

DTynewydd
  • 310
  • 4
  • 10
  • I was trying a similar thing, It works with having a font file like fontawesome ttf/otf and rendering a glyph inside TextBlock or FontIcon element. It can render glyphs with any color (using Brush). It can also render multicolored glyphs, like ✨. – Patrik Staron Nov 28 '21 at 01:38

1 Answers1

0

To have control over the stroke color you will have to convert the svg to a path using any tool like Gimp: https://www.gimp.org/downloads/.

Using the tool generate a path data which u can use in winui as such:

<PathIcon Data="F1 M 16,12 20,2L 20,16 1,16" Foreground="{ThemeResource ControlAAFillColorDefault}"/>

Data: This is data generated, usually its given after d= in most convertor tools.

Foreground: You can use provided themeResources to shift colors for dark and light modes or define your own brush.

vasanth kumaran ganesan
  • 1
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 17 '22 at 11:42