How do you display a SVG image?

[Orgbrat]

I know you can place your SVG images in the Resources\Images folder and when you build your solution they are converted to PNG images. But I want to display a SVG image directly in the application. Can this be done using Maui or Maui.Graphics.? I
suppose you would need to put the SVG on a canvas somehow but I can not find an example of how to do this. Can you load the SVG directly from the XAML on a page? Can you load a SVG into an XAML Image tag?

[J-Swift]

Old question, but figured I'd answer:

This is possible, in a couple different ways.

For iOS you can choose between using PDF vectors, or SVGs. If you use SVGs you don't need to convert your original image, but you do need to add special MSBuild config to copy the files to your resources due to the default rules not picking them up (see #4862). If you use PDF vectors, they will be copied to the app but you need to convert the original file.

For Android you need to convert to a vector Drawable. This is then copied just fine during build.

For file conversion, I use this project that I also wrote (https://github.com/J-Swift/Svg2Vector). It generates all 3 formats for a given SVG (android drawable, iOS PDF, iOS SVG) and you can choose which ones to use.

EDIT: also note that you have to then copy the files into the correct place. On iOS that means to make a folder called {projectDir}/Platforms/iOS/Assets.xcassets and on android make a folder called {projectDir}/Platforms/Android/Resources/drawables. Place the generated files in there.

[janseris]

So there isn't anything like WPF PathGeometry in MAUI - interactive vector elements in SVG-compliant (but also C#-compliant) format?

[charlesroddie]

You can use Svg.Skia.

[Awesomer9561]

Can you please provide steps on how to use it?

[xtuzy]

Store svg to Resources/Raw, read stream and use https://github.com/wieslawsoltes/Svg.Skia to draw on skcanvas, then you can show svg at anywhere that skaisharp support. Notice test, it not support all svg funtion.

[janseris]

This doesnt sound like it supports the basic Image markup tag or does it?

[charlesroddie]

I don't know the exact coverage of Svg.Skia but it's a very good subset which has worked on all svgs we have tried, with the exception of files that contained bitmap graphics.

BItmap graphics shouldn't have been in the svg spec as svgs are supposed to be vector graphics, and for us it turned out to be a good thing that the library didn't render those as it identified bad svg files.

[FreakyAli]

Can you please provide steps on how to use it?

Check my Nuget package below :)

[FreakyAli]

Hey, everyone who's looking for a solution to this, I have created an SVGImageViewer that uses Skia to Display Images. It works for Android and iOS. For more information check: https://github.com/FreakyAli/MAUI.FreakyControls (As of now you cannot load online svg files)

[vickyanand25005]

@FreakyAli i want to use this glass fill SVG images in one of my project where water level changes based on slider value. This i need to implement in MAUI . Any help will be great.
Thanks
Anand

[weezard12]

You can use Svg.Skia to render SVG in MAUI. HOWEVER, for me all of the text is off centered.
WebView is built in and can easily render static SVG images.

        <WebView x:Name="MyWebView"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   WidthRequest="500"
                   HeightRequest="500"/>

in the C# part:
MyWebView.Source = @"C:\svgImage.svg";