[Android] my custom svg icon is always black on Android

Description

alfa.zip

<MauiIcon Include="Resources\appicon.svg" ForegroundFile="Resources\appicon.svg" />

Using this simple svg as MauiIcon on Android displays black shape on black background. The colors cannot be modified by any MauiIcon property (as far as I have been trying exhaustivly for the last 4 hours) The shape can be seen during a few frames when the application is started from the Android applications menu/list (there is an animation on Android which quickly shows the shape without backgorund -> black “alpha” shape is visible in these few frames)

Note: the file must be called appicon for Android else the project fails to build.

The svg shape is rendered as black when used in MauiSplashScreen as well.

https://docs.microsoft.com/en-us/dotnet/maui/user-interface/images/app-icons?tabs=android I read that svg files are converted to bitmaps. Is is an issue in the conversion then?

.NET MAUI converts SVG files to PNG files.

Is that really needed? The svg size is 2 kB. PNG size is probably hundreds of kB. We use svgs to squeeze application size. MAUI isn’t capable of displaying svgs?

Steps to Reproduce

Try use the image as Android icon (maybe the black image occurs on Windows as well?)

Version with bug

Release Candidate 3 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 11

Did you find any workaround?

No response

Relevant log output

No response

[rrmanzano]

Hi, @janseris looks like the issue is when the SVG file contains CSS styles, I did a small test, and here are my findings:

SVG to reproduce the issue

<svg id="ed8c3fcb-bb52-46d0-9a9e-bb9fc9e2126f" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.2 132.07">
	<defs>
		<style>
			.a177f59e-042c-4483-90f2-4254cea05478 { fill: #fbcc0a; }
			.faa715a9-1b62-464d-a476-8cbd4e83f49b { fill: #ee1c4e; }
		</style>
	</defs>
	<rect class="a177f59e-042c-4483-90f2-4254cea05478" y="22.64" width="149.8" height="109.43"/>
	<rect class="faa715a9-1b62-464d-a476-8cbd4e83f49b" x="72.64" width="102.56" height="77.36"/>
</svg>

Same SVG without CSS - Works !!

<svg id="ed8c3fcb-bb52-46d0-9a9e-bb9fc9e2126f" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.2 132.07">
  <rect y="22.64" width="149.8" height="109.43" fill="#fbcc0a"/>
  <rect x="72.64" width="102.56" height="77.36" fill="#ee1c4e"/>
</svg>

Tested with VS 2022 version 17.3.0 Preview 1.0

[mattleibow]

I believe that bug was fixed here: #7106 and is a duplicate of #7101

If this is still happening on the latest public preview, please reopen with a binlog.