Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I want to use a SVG image format as an button image because I want these images is shown with high quality so I have decided to use SVG format. I have searched about it and There are some people that say SVG format can be used as WPF image source. But when I use SVG image Like this:

<Image Source="Images/hard.svg"/>
I have error.
Absolutely Microsoft website says I can use SVG file as Image source.
https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.imaging.svgimagesource?view=winrt-19041
How can I use SVG image format as my WPF image souse?
You have to convert svg to xaml using this library https://github.com/BerndK/SvgToXaml
Sample output:
<DrawingImage x:Key="ic_close">
    <DrawingImage.Drawing>
        <DrawingGroup ClipGeometry="M0,0 V24 H24 V0 H0 Z">
            <GeometryDrawing Brush="Red"
                          Geometry="F0 M24,24z M0,0z M5.21723,16.4509C4.64003,17.0905 4.68203,17.8189 5.21723,18.3421 5.75123,18.8653 6.65362,18.8329 7.15522,18.3421 7.52928,17.977 10.3498,15.0233 11.7599,13.5448 13.1706,15.0243 15.9893,17.977 16.3633,18.3402 16.8649,18.8298 17.7673,18.8634 18.3013,18.3402 18.8365,17.8206 18.8785,17.091 18.3013,16.4514L13.8049,11.7618 18.3013,7.07225C18.8785,6.43265 18.8365,5.70425 18.3013,5.18105 17.7673,4.65785 16.8649,4.69025 16.3633,5.18105 15.9892,5.54616 13.1687,8.49985 11.7585,9.97833 10.3479,8.4988 7.52916,5.54607 7.15523,5.18287 6.65363,4.69327 5.75123,4.65967 5.21723,5.18287 4.68203,5.70247 4.64003,6.43207 5.21723,7.07167L9.71363,11.7613 5.21723,16.4509z" />
        </DrawingGroup>
    </DrawingImage.Drawing>
</DrawingImage>
Sample usage:
<Image Width="14"
       Height="14"
       Source="{StaticResource ic_close}" />
If you look at the namespace of that page you linked, you will see:
 Windows.UI.Xaml.Media.Imaging
Meaning this is uwp rather than wpf.
You could use SharpVectors
https://github.com/ElinamLLC/SharpVectors
Or you could manually extract the path or paths from in that svg and use those in wpf. Since this is a manual conversion that might not be attractive if there are a number of svg you wish to use or appropriate if they are somehow dynamic.
Another option to consider is xaml islands.
You could host a uwp image control in a xaml island
https://blogs.windows.com/windowsdeveloper/2018/11/02/xaml-islands-a-deep-dive-part-1/#:~:text=XAML%20Islands%20is%20a%20technology,Windows%20Forms%20and%20WPF%20technologies.
Note that this introduces a dependency on win 10 creators edition or later.
WPF renders vector based but cannot render SVG files directly. You would have to use a vector based image processing application to convert the SVG to XAML.
Generally, the XAML obtained from the exported SVG usually consists of Path or Geometry elements, which you wrap into a Viewbox for scaling.
Adobe Illustrator (not free, trial available) yields the best results. You use it to convert the SVG image to .ai file and then Blend or a plug-in to export the .ai file as XAML.
AB4D (not free, trial available) is another application which also outputs very good results and allows to export directly to XAML.
InkScape is free and works too, but the results are not very good and most of the time require manual post-processing. Complex graphics never look good out  of the box.
There are more tools like SvgToXaml, but I don't remember the quality.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.