Skip to content
Jakub Jedryszek edited this page Jan 12, 2017 · 32 revisions

SVG support now working (Preview)

SVG files are now working and support every FFImageLoading's feature. It uses SkiaSharp for rendering.

Xamarin.Forms

It's very easy, just add Xamarin.FFImageLoading.Svg.Forms nuget and 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 image.svg, 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
		.LoadStream(ct => Task.FromResult<Stream>(new MemoryStream(Encoding.Default.GetBytes(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
		.LoadStream(ct => Task.FromResult<Stream>(new MemoryStream(Encoding.Default.GetBytes(svgString))))
		.WithCustomDataResolver(new SvgDataResolver(64, 0, true))
		.AsUIImageAsync();

Clone this wiki locally