locked
How to change the colour of the SVG image at run time RRS feed

  • Question

  • User336067 posted

    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?

    Wednesday, November 14, 2018 6:57 AM

Answers

  • User187134 posted

    You can do it something like this:

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path fill="heart_filled" opacity="heart_filled" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z">/>
    </svg>
    
    public class TestIcon : SvgCachedImage
    {
    public TestIcon()
    {
    likeIconColor = Helpers.ColorHelper.GetHexString((Color)Application.Current.Resources["LikeIcon"]);
    
    var dict = new Dictionary<string, string>();
    dict.Add("fill=\"heart_filled\"", "fill=\"" + likeIconColor + "\"");
    dict.Add("opacity=\"heart_filled\"", "opacity=\"0\"");
    
    ReplaceStringMap = dict;
    Source = SvgImageSource.FromFile("favorite_24px.svg");
    }
    }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, November 14, 2018 9:34 AM

All replies

  • User187134 posted

    You can do it something like this:

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path fill="heart_filled" opacity="heart_filled" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z">/>
    </svg>
    
    public class TestIcon : SvgCachedImage
    {
    public TestIcon()
    {
    likeIconColor = Helpers.ColorHelper.GetHexString((Color)Application.Current.Resources["LikeIcon"]);
    
    var dict = new Dictionary<string, string>();
    dict.Add("fill=\"heart_filled\"", "fill=\"" + likeIconColor + "\"");
    dict.Add("opacity=\"heart_filled\"", "opacity=\"0\"");
    
    ReplaceStringMap = dict;
    Source = SvgImageSource.FromFile("favorite_24px.svg");
    }
    }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, November 14, 2018 9:34 AM
  • User336067 posted

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

    Wednesday, November 14, 2018 10:29 AM
  • User187134 posted

    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.

    <Application.Resources>
    <ResourceDictionary>
    <Color x:Key="LikeIcon">#CC3F14</Color>
    </ResourceDictionary>
    </Application.Resources>
    
    Wednesday, November 14, 2018 10:33 AM
  • User336067 posted

    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(); dict.Add("fill=\"heartfilled\"", "fill=\"" + "#CC3F14" + "\""); dict.Add("opacity=\"heartfilled\"", "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

    Wednesday, November 14, 2018 11:02 AM
  • User187134 posted

    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\"");

    Wednesday, November 14, 2018 11:06 AM
  • User336067 posted

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

    Wednesday, November 14, 2018 11:11 AM
  • User187134 posted

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

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

    Wednesday, November 14, 2018 1:05 PM
  • User336067 posted

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

    Wednesday, November 14, 2018 7:13 PM
  • User187134 posted

    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.

    Thursday, November 15, 2018 8:29 AM
  • User336067 posted

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

    Thursday, November 15, 2018 2:09 PM
  • User187134 posted

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

    Nice! :-)

    Thursday, November 15, 2018 2:17 PM
  • User133193 posted

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

    Happy Xamming ! :)

    Tuesday, January 29, 2019 12:43 PM