Can't specify the color of an SVG image

Description

I’m trying to use an SVG image in my project but I can’t specify the color. The Image color doesn’t have a ForeColor property. How to change the color in xaml or codebehind? Note that I would like to use the same image but with different colors.

As an alternative I tried to set the color using the TintColor property in the project file, but that doesn’t seem to work. The image always renders black.

This is the project file:

<ItemGroup> <None Remove="Resources\Images\delete.svg" TintColor="#FF0000" BaseSize="50,50" /> <None Remove="Resources\Splash\splash.svg" /> </ItemGroup>

And this is the result:

I’m kind of puzzled that we should set the color in the project file, instead of a property on the Image itself.

Steps to Reproduce

1. Create a new Maui project
2. Add an SVG image to the project and set the color as described above
3. Run the project, image stays black

Link to public reproduction project repository

None

Version with bug

6.0.400

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

All Android

Did you find any workaround?

No response

Relevant log output

No response

[Jabbah76]

OK, I have figured out the exact notation to make it work

<MauiImage Update="Resources\Images\delete.svg" TintColor="#FF0000" BaseSize="50,50" />

Note it should be Update instead of Include

However, I still think specifying the color of the SVG image in the project file is not the way to go as you could use the same image with different colors. Can a solution for this be considered?

I will also try Phenek’s workaround, but something out of the box would be nice

Edit: Just saw that the Community Toolkit has the IconTintColorBehavior, which is good enough for me

[myrup]

@PureWeen Is this really closeable? It seems like something that should just be working out-of-the-box.

Perhaps a TintColor attribute on Image.