Xamarin Forms SVG UI Element

This project uses SkiaSharp libraries for Xamarin Forms to create SVG images on content pages. I have created reusable control so anybody can use it without any further changes. Please check Wiki for detailed documentation for this control.

---

How to use "SVGUIElement"

It's very easy to "SVGUIElement" in any Xamarin Forms project. You just need to copy "SVGUIElement.cs" into your project and install following required nuget packages.

SkiaSharp

SkiaSharp.Views.Forms

Set Reference in Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:SVGUIElement" // Change this if you changed namespace in SVGUIElement.cs
         x:Class="Your-Namespace.Your-Page">

Initialize in Xaml

<local:SVGUIElement ResourceId="Your-MainFolder.SubFolder.Svg.txt" Color="Blue" SVGPaintStyle="Fill" />

Want more information?

http://www.pshul.com/2018/01/25/xamarin-forms-using-svg-images-with-skiasharp/

https://www.pshul.com/2018/02/01/xamarin-forms-interactive-svg-image-using-skiasharp-with-pan-and-zoom/

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/curves/path-data

Recommendation

I would advise you to use Grid layout to control Svg size according to your need because other layouts seem to have issues with canvas that if Svg is scaled to certain point it will clip. Don't forget to explicitly set row height or you will face same clipping issues.

Future

I might work on to fix clipping issue and add more features like gradient color.

Note: I haven't tested this on iOS or UWP