SVG - Tinting not working

No matter what I try I can't tint the bitmap - it is always drawn in black. Tested on Venu3, Fenix7X and Epix2 (all in the sim).

I used a simply SVG from FontAwesome (it contains a path only maybe that is problematic?) and added it like following (and even more variants):

<bitmap id="svg_gear" filename="svgs/test.svg" packingFormat="png" compress="true" scaleX="32" scaleY="32"/>
<bitmap id="svg_gear" filename="svgs/test.svg" packingFormat="default" scaleX="32" scaleY="32"/>
<bitmap id="svg_gear" filename="svgs/test.svg" packingFormat="png" scaleX="32" scaleY="32">
	<palette disableTransparency="false">
		<color>FF0000</color>
	</palette>
</bitmap>

And draw it like following:

dc.drawBitmap2(
  (w - (image as BitmapResource).getWidth()) / 2, 
  (h - (image as BitmapResource).getHeight()) / 2, 
  (image as BitmapResource), 
  { :tintColor => Graphics.COLOR_RED }
);

Nothing works.

If I use a PNG with a simple form like rect instead of path, everything works... Can this be solved?

  • It's here: https://fontawesome.com/icons/gear?f=classic&s=solid

    It looks like following:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="512" width="512">
        <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
        <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" />
    </svg>

  • Ok, so I have no idea, but I'd also be interested in the solution, so just brainstorming: shouldn't there be a color in the SVG? I mean for example red, so in case of using the disableTransparency it would correspond to that "color"? 

  • When I add

    fill="green" stroke="green"

    to the path element the icons is always drawn in green and never tinted. And this was all I tested yesterday.

    I created a bitmap font today and was remembered to that it only works with white on black. So I just made a few more tests with following result:

    • "green"... tinting does not work
    • "yellow"... tinting works
    • "black"... tinting  does not work
    • "white"...tinting works

    This all is just tested on the sim using the Venu3 device...

    It behaves the same when setting the color in the root as well as when I set it in the path element...

  • What if you try to explicitly add transparency to the path? Maybe some idea from here works: stackoverflow.com/.../svg-fill-color-transparency-alpha

  • Try any Grey color. No need for palette.

    :tintColor works on "Greyscale" images.