Are there any alternatives to the luberda-molinet/FFImageLoading code for svg image loading in XF

Question

The code here in the luberda-molinet/FFImageLoading works well for me most of the time but I am finding that sometimes my images do not load correctly on iOS. Possibly it's also a problem on Android but I've not yet looked into this yet. Here's an example:

The code behind the Header icon and the Language icon is identical. To resolve this problem I need to close the app and open it again and the Header icon will display correctly but then another icon might not have the correct height. Here is the code behind the icon:

    <Frame x:Name="SvgFrame"
           Grid.Column="0"
           VerticalOptions="Center"
           BackgroundColor="{Binding IconBackgroundColor,  Source={x:Reference this}}"
           CornerRadius="5"
           Padding="4" HasShadow="False">
            <ffimageloadingsvg:SvgCachedImage Source="{Binding IconSource, Source={x:Reference this}}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
    </Frame>

Answer 1

You can create an image from a SVG file in runtime, using SkiaSharp.

SKSvg svg = new SKSvg();
svg.Load(**Your SVG stream or file**);
using (SKBitmap bitmap = new SKBitmap((int)svg.CanvasSize.Width, (int)svg.CanvasSize.Height))
using (SKCanvas canvas = new SKCanvas(bitmap))
{
    canvas.DrawPicture(svg.Picture);
    canvas.Flush();
    canvas.Save();

    using (SKImage image = SKImage.FromBitmap(bitmap))
    using (SKData data = image.Encode(SKEncodedImageFormat.Png, 80))
    using (MemoryStream memStream = new MemoryStream())
    {
        data.SaveTo(memStream);
        memStream.Seek(0, SeekOrigin.Begin);

        using (SKManagedStream skStream = new SKManagedStream(memStream))
        {
            _bitmap?.Dispose();
            _bitmap = SKBitmap.Decode(skStream);
        }
    }
}

The code is not tested though, so may be you need to check. Let me know if this helps!