Using SVG for icons is a great way to tackle the different resolution issues on mobile platforms, but wouldn’t be even better if we can share the same SVG resources across all our specific platform projects. That’s exactly what I’m going to show you here, we will be using Xamarin.FFImageLoading.Svg.Forms library which allow us to achieve this easily.

So let’s get started.

Setup

1 – Install the plugin in all your projects:

Xamarin.FFImageLoading.Svg.Forms

2- Add in each platform specific project just before the LoadApplication call:

• Android MainActivity.cs:

 protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);
            CachedImageRenderer.Init(true);
            var ignore = typeof(SvgCachedImage);
            LoadApplication(new App());
        }

• iOS AppDelegate.cs:

    public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            CachedImageRenderer.Init();
            var ignore = typeof(SvgCachedImage);
            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }

• UWP MainPage.xaml.cs:

  public MainPage()
  {
      this.InitializeComponent();
      CachedImageRenderer.Init();
      var ignore = typeof(SvgCachedImage);
      LoadApplication(new SharedSvgSample.App());

  }

3 – Let’s get some nice svg icons, a good place might be: Material Icons

4 – Create a folder on the NETStandard/PCL project where you will put these icons.

5 – When you add the svgs to the project make sure to set build action to Embedded resource on each.

Let’s try it out

You must specify the image path like this:

resource://{Full Assembly Name}.{Svg Icons Folder Name}.{Svg File Name}

<?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:local="clr-namespace:SharedSvgSample"
             x:Class="SharedSvgSample.MainPage"         
             xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms">

    <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
        <ffimageloadingsvg:SvgCachedImage WidthRequest="100" HeightRequest="100" Source="resource://SharedSvgSample.Resources.bug.svg"/>
        <ffimageloadingsvg:SvgCachedImage WidthRequest="100" HeightRequest="100" Source="resource://SharedSvgSample.Resources.camera.svg"/>
        <ffimageloadingsvg:SvgCachedImage WidthRequest="100" HeightRequest="100" Source="resource://SharedSvgSample.Resources.fingerprint.svg"/>
    </StackLayout>

</ContentPage>

Here you can check the full source code for this sample:

http://www.github.com/CrossGeeks/SharedSvgSample

Happy SVG sharing!