Loading SVG images in Xamarin.Forms

hand holds touch screen mobile phone streaming images

As a Xamarin.Forms cross-platform developer I have been using a set of Libraries called FFImageLoading during the past 4 years. However upgrading a customers App to Xamarin.Forms 5.0 brought some unforseen surprises. SVG images that were loading fine with Xamarin.Forms 4.8 were not loading properly and the whole rendering process of the App got effected. After checking with the FFImageLoading Github repository it turned out that the project has not been maintained since late 2019. After digging around I found some alternative solutions, but they were also outdated. So I merged features from the Xamarin.Forms.Svg Library and code from a blog post into a new solution that works with Xamarin.Forms 5.0.

Introducing Xamarin.Forms.Extensions.Svg

The library provides a View Component that renders the SVG images from Embedded Resources of the Shared Projekct via SkiaSharp.

Setup

Install the library via Nuget, add the latest version of SkiaSharp to your Apps Shared and Platform Projects and add the following line to your Apps App.xaml.cs:

        public App()
        {
            InitializeComponent();

            // ...

            Xamarin.Forms.Extensions.Svg.SvgImage.RegisterAssembly();

            // ...

            MainPage = new MainPage();
        }

Usage

First add your SVG images to your Shared Project as EmbeddedResource.

Afterwards you can use the SvgImage View in your App:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:svg="clr-namespace:Xamarin.Forms.Extensions.Svg;assembly=XamExtensionsSvg"
             x:Class="SVGSample.MainPage">
<!-- ... -->
      <svg:SvgImage Source="tiger.svg" WidthRequest="100" HeightRequest="100" />
<!-- ... -->
</ContentPage>

If you want to change the SVGs color you can use the TintColor property:

       <svg:SvgImage Source="colours.svg" WidthRequest="20" HeightRequest="20" TintColor="#fcd303" />

Learn more

You can find the project and most up-to-date details on Github. The project also contains a working sample application. The library can be directly installed from nuget.org.