CODEWITHSUNDEEP
xamlxamarinsvgxamarin.forms
DarkW1nter
DarkW1nter

Reputation: 2851

Using SVG images in Xamarin Forms

I'm using the nugget package SVG.Forms.Plugin.Abstractions, I have copied the XAML below from a simple example but cannot get the SVG to show.

The image is in an 'images' folder within the 'TestApp' application and it's build action is 'Embedded Resource'. SvgAssebly is bound to the public assembly below in the viewModel.

All I get is a blank screen with the title text at the top.
Can anyone see anything obviously wrong?

public Assembly SvgAssembly
{
       get { return typeof(App).GetTypeInfo().Assembly; }
}

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" 
             x:Class="TestApp.MainPage" 
             xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared" 
             xmlns:local="clr-namespace:TestApp;assembly=TestApp" Title="{ artina:Translate PageTitle}" BackgroundColor="{DynamicResource BasePageColor}"
             xmlns:abstractions="clr-namespace:SVG.Forms.Plugin.Abstractions;assembly=SVG.Forms.Plugin.Abstractions">

    <ContentPage.Content>

        <StackLayout>
            <abstractions:SvgImage
                SvgAssembly="{Binding SvgAssembly }"
                SvgPath="TestApp.images.brand.svg"
                Width="200"
                Height="200" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Upvotes: 2

Views: 4829

Answers (2)

Ryan Gaudion
Ryan Gaudion

Reputation: 975

Try using FFImageLoading as it has an option to use SVG images. It also has the option to cache images on the user's device. Find the documentation below:

https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-API

Upvotes: 0

LeRoy
LeRoy

Reputation: 4436

Just a note :

  1. remove the spacing from your binding :

    SvgAssembly="{Binding SvgAssembly }"

  2. You should be referencing the image like this :

    SvgPath="brand.SVG"

You need to make sure you are referencing the image correctly : my answer from another question here.

Upvotes: 1

Related Questions