How can I use SVG image format use as WPF image source

user_10556043 0
Viewed 9845

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://docs.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?

svg wpf
3 Answers

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}" />
user_52172100

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.

user_4261850

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.

user_31417920
Related