Xamarin.FormsでSVG画像を表示


Xamarin.Formsに用意されている Image コントロールではSVGを表示できないので、[FFImageLoading](https://github.com/luberda-molinet/FFImageLoading) というパッケージを使って表示させます。

## FFImageLoadingを追加

各プラットフォームに、下記のパッケージを追加します。

- FFImageLoading Plugin for Xamarin Forms
- Xamarin.Forms FFImageLoading SVG support

![nuget.png](https://qiita-image-store.s3.amazonaws.com/0/169798/0fb778ba-006d-3f18-5301-5b20e4fbd1c1.png "nuget.png")


## FFImageLoadingの初期化

iOS/Android に FFImageLoading の初期化コードを追加します。

### iOS

```csharp:AppDelegate.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;    // <-- 追加

using Foundation;
using UIKit;

using FFImageLoading.Forms.Touch;   // <-- 追加
using FFImageLoading.Svg.Forms;     // <-- 追加

namespace SvgApp.iOS
{
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            
            var svgAssembly = typeof(SvgCachedImage).GetTypeInfo().Assembly;    // <-- 追加
            CachedImageRenderer.Init();                                         // <-- 追加

            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }
    }
}
```

特にこの2行を忘れないでください。

```
using System.Reflection;

(中略)

var svgAssembly = typeof(SvgCachedImage).GetTypeInfo().Assembly;
```

これがないと落ちます。

落ちた環境:
- Visual Stusio for Mac: 7.1.3
- Xamarin.Forms: 2.3.4.247
- FFimageLoading: 2.2.13

[Xamarin.Forms] Problem loading SVG image on iOS:
https://github.com/luberda-molinet/FFImageLoading/issues/604


### Android

```csharp:MainActivity.cs
using System;

using Android.App;
using Android.Content;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

using FFImageLoading.Forms.Droid;   // <-- 追加

namespace SvgApp.Droid
{
    [Activity(Label = "SvgApp.Droid", Icon = "@drawable/icon", Theme = "@style/MyTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        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(); // <-- 追加

            LoadApplication(new App());
        }
    }
}
```

## 実装

```xml:XAML
<?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:SvgApp"
    xmlns:ffsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
    x:Class="SvgApp.SvgAppPage">
    
    <ffsvg:SvgCachedImage Source="tiger.svg" />
    
</ContentPage>
```

## 結果

### iOS
![result_ios.png](https://qiita-image-store.s3.amazonaws.com/0/169798/586c1f90-4886-4556-4a8b-fe73ec117190.png "result_ios.png")

### Android
![result_android.png](https://qiita-image-store.s3.amazonaws.com/0/169798/1b959f06-06f7-72a3-0b84-7a0b99f5c6fe.png "result_android.png")


SVGの虎が表示されました。

実行時に表示されるのであまり問題ではないんですけど、XAMLプレビュー時にSVGが表示されません。
今後、プレビューでも表示されるようになることを期待したいですね。

とりあえずは以上です。