how to use svg file in Path?

Question

I have a svg file icon.svg and how to use it in Path?

you may say I can use <Image Source="icon.svg" />

but I do now want it I just want to use it in xaml.

<svg id="l_1" data-name="l 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.2 42.95"> <defs> <style>.cls-1{isolation:isolate;}.cls-2{fill:#203251;}.cls-3{fill:#2882fe;}</style> </defs> <g id="z_7436" data-name="z 7436"> <g class="cls-1"> <path class="cls-2" d="M77.83,13.8a36.37,36.37,0,0,1-3.71,2.94,25.45,25.45,0,0,0-2.35-2.42,30.06,30.06,0,0,0,9.56-9.45l3,1.09a33.26,33.26,0,0,1-3.32,4.51v12H77.83Zm25.52,15.78H89.41v7.49H86V29.58H72Z"/> </g> </g> </svg>

how to use it in xaml? <Path Data ="" />

Answer 1

Hello,

Welcome to Microsoft Q&A!

You couldn't use the svg file in xaml Path.Data . You could refer to the thread: https://github.com/microsoft/microsoft-ui-xaml/issues/507

You need to create a SvgImageSource object with your own SVG string, and then set the SvgImageSource object to the source of the image.

You could follow the following code:

var svg = new SvgImageSource();

string SampleSvg = "your SVG string";
 
using (MemoryStream stream = new MemoryStream(Encoding.UTF8.GetBytes(SampleSvg)))

{

    stream.Seek(0, SeekOrigin.Begin);
 
    SvgImageSource imageSource = new SvgImageSource();

    imageSource.RasterizePixelWidth = yourWidth;

    imageSource.RasterizePixelHeight = yourHeight;

    imageSource.SetSourceAsync(stream.AsRandomAccessStream()).AsTask();

    MyImageName.Source = imageSource;

}

<Grid Background="Black">

     <Image  x:Name="MyImageName" Height="200" Width="200"/>

</Grid>

Thank you.

Jeanine

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.