SVG support

SVG support

SVG files are now working and support every FFImageLoading's feature. It uses SkiaSharp for rendering. If SVG file isn't loading, try to optimise file first using this: https://jakearchibald.github.io/svgomg/ (or cmd only https://github.com/svg/svgo and add it to your pre-build scripts)

Data URLs support

FFImageLoading now supports loading data as data: urls or plain SVG.

• data:image/svg+xml;base64,[BASE64ENCODEDSVGFILE]
• <SVG>NOT_ENCODED_SVGFILECONTENT</SVG>
• data:image/svg+xml,<SVG>[NOT_ENCODED_SVGFILECONTENT</SVG>

Read more here:

Xamarin.Forms

It's very easy, just add Xamarin.FFImageLoading.Svg.Forms nuget and use SvgCachedImage instead CachedImage:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="FFImageLoading.Forms.Sample.SvgSamplePage"
		xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms">

	<ContentPage.Content>
		<ffimageloadingsvg:SvgCachedImage WidthRequest="200" HeightRequest="200" Source="sample.svg"/>	

		<!-- SECOND APPROACH (PCL EmbeddedResource): -->
		<ffimageloadingsvg:SvgCachedImage WidthRequest="200" HeightRequest="200" Source="resource://FFImageLoading.Forms.Sample.Resources.sample.svg"/>  
            
	</ContentPage.Content>
</ContentPage>

When loading from embedded resources, you can specify different assembly with following format: resource://FFImageLoading.Forms.Sample.Resources.sample.svg?assembly=[ASSEMBLY FULL NAME]

More advanced scenarios: use a custom SvgImageSource which enables SVG support. Please notice, that it has optional parameters for controlling renderered SVG size (automatic by default) IMPORTANT: Your projects also must reference System.Xml.Linq.

From code:

source = SvgImageSource.FromFile("image.svg")
source = SvgImageSource.FromUri("http://example.com/image.svg")
// etc...

Or use a provided converter (eg. when using XAML):

Source="{Binding SvgFileName, Converter={StaticResource SvgImageSourceConverter}}"

Native

When loading images you have to configure custom data resolver which enables SVG support:

ImageService.Instance
			.LoadFile("image.svg")
			.LoadingPlaceholder("placeholder.svg")
			.WithCustomDataResolver(new SvgDataResolver(200, 0, true))
			.WithCustomLoadingPlaceholderDataResolver(new SvgDataResolver(200, 0, true))
			.Into(imageView);

You can also load svg image from string:

	var svgString = @"<svg><rect width=""30"" height=""30"" style=""fill:blue"" /></svg>";

	ImageService.Instance
		.LoadString(svgString)
		.LoadingPlaceholder(placeHolderPath)
		.WithCustomDataResolver(new SvgDataResolver(64, 0, true))
		.WithCustomLoadingPlaceholderDataResolver(new SvgDataResolver(64, 0, true))
		.Into(imageView);

Converting svg string into UIImage:

	var svgString = @"<svg><rect width=""30"" height=""30"" style=""fill:blue"" /></svg>";

	UIImage img = await ImageService.Instance
		.LoadString(svgString)
		.WithCustomDataResolver(new SvgDataResolver(64, 0, true))
		.AsUIImageAsync();

SVG string replacement (including colors)

You can replace svg string by using Dictionary<string, string> replacement map.

Xamarin.Forms

Specify / bind ReplaceStringMap parameter of SvgCachedImage object OR provide optional replaceStringMap parameter in SvgImageSource methods.

Native

Provide replaceStringMap parameter in SvgDataResolver constructor.