C#•16mo ago

✅ How to use SVGs in XAML file (WPF)

I have a WPF project and I want to use an svg file in MainWindow.xaml. How do I properly use svg in xaml files? Do I need to convert it into something else?

4 Replies

kuulie•16mo ago

I also want to be able to dynamically change its fill color like how i can using CSS An article or tutorial would suffice

JakenVeina•16mo ago

one thing you can do is attempt to convert the SVG into path geometry

M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z

M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z

this draws the following icon

JakenVeina•16mo ago

because unfortunately, WPF does not directly support SVGs but if you just want a generic piece of vector graphics, a Geometry is pretty much what you wnt the app I pulled that little example from has a shared UserControl that I use to display a bunch of different geometry icons like that

<Viewbox
        DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"
        Stretch="Uniform">
    <Path
        Data="{Binding Definition.Geometry}"
        Width="{Binding Definition.CanvasWidth}"
        Height="{Binding Definition.CanvasHeight}"
        Fill="{Binding Fill}"/>
</Viewbox>

<Viewbox
        DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"
        Stretch="Uniform">
    <Path
        Data="{Binding Definition.Geometry}"
        Width="{Binding Definition.CanvasWidth}"
        Height="{Binding Definition.CanvasHeight}"
        Fill="{Binding Fill}"/>
</Viewbox>

there's a handful of other ways you can use a Geometry to do interesting things

Gaming

Programming

✅ How to use SVGs in XAML file (WPF)