-
Notifications
You must be signed in to change notification settings - Fork 374
SVG support
Daniel Luberda edited this page Apr 4, 2017
·
32 revisions
SVG files are now working and support every FFImageLoading's feature. It uses SkiaSharp for rendering.
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"/>
</ContentPage.Content>
</ContentPage>
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}}"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();