How to change the colour of the SVG image at run time

saishaiksaishaik INMember ✭✭
edited November 2018 in Xamarin.Forms

I am trying to change the colour of the svg image at run time. I have a svg file and by using FFImageLoading I am able to display that image.But I want to change the selected part of colour. Here is the image I am displaying, when I taps on head the colour should be changed.

Can such a functionality added in Xamarin.forms?

Best Answer


  • saishaiksaishaik INMember ✭✭

    Thanks for the reply @LarsNymand , can you please explain me what is likeIconColor and likeIconColor = Helpers.ColorHelper.GetHexString((Color)Application.Current.Resources["LikeIcon"]);

  • LarsNymandLarsNymand DKMember ✭✭

    that's just to get the color from my application resources (app.xaml). It was just copy&paste. not sure if you need it in your case.

    <Color x:Key="LikeIcon">#CC3F14</Color>
  • saishaiksaishaik INMember ✭✭

    Thanks again for the help @LarsNymand , But I am not able to get that to be working, can you please confirm me am I missing in assigning, I am getting svg as following
    <ffimageloadingsvg:SvgCachedImage x:Name="bodyMapImage" WidthRequest="200" HeightRequest="600"/>

    from code:
    Initially loading image as bodyMapImage.Source = SvgImageSource.FromFile("Boby.svg");
    In some event, trying to change the colour as below
    var dict = new Dictionary<string, string>();
    dict.Add("fill=\"heart_filled\"", "fill=\"" + "#CC3F14" + "\"");
    dict.Add("opacity=\"heart_filled\"", "opacity=\"0\"");

                                bodyMapImage.ReplaceStringMap = dict;
                                bodyMapImage.Source = SvgImageSource.FromFile("Boby.svg");

    and Svg file is as below
    <path fill="heart_filled" opacity="heart_filled" d="M145.49,173.129c-1.469,-2.02 -2.018,-4.412 -3.857" class="" style=""> </path>

    and the svg file location is at iOS->Resources->Boby.svg

  • LarsNymandLarsNymand DKMember ✭✭

    I am not sure if you are getting an error or just not seeing the image?
    If you are not seeing the image, it's probably because you copied the Opacity=0 as well :-) try to remove that or set it to 1

    dict.Add("opacity=\"heart_filled\"", "opacity=\"0\"");

  • saishaiksaishaik INMember ✭✭

    I am able to see the image but but the colour is not applying for that :-(

  • LarsNymandLarsNymand DKMember ✭✭

    Can you try to set the ReplaceStringMap AFTER setting the Source?

    I remember experiencing something similar, but cannot remember what it was. :-S

  • saishaiksaishaik INMember ✭✭

    Hi @LarsNymand, Now I am able to apply the colours form xaml.cs but is there any way to change those colours from ViewModel?

  • LarsNymandLarsNymand DKMember ✭✭

    You can do that, but it's probably not best practice and should be kept in the View.

    Your View can then listen on property changes from the ViewModel and change color accordingly.

  • saishaiksaishaik INMember ✭✭

    Thank you very much @LarsNymand for all the help :smile: . Finally I made to be worked .

  • LarsNymandLarsNymand DKMember ✭✭

    @saishaik said:
    Thank you very much @LarsNymand for all the help :smile: . Finally I made to be worked .

    Nice! :-)

  • MehulTheXammerMehulTheXammer USMember ✭✭

    Thanks @saishaik and @LarsNymand for your solutions. It eased in getting my problem's solution.

    Happy Xamming ! :)

Sign In or Register to comment.