Change color of a svgImage

[GMeur]

Hi,

I just installed the version 4.21.1 to play around with svg images and I just found out that there is no way to change the color of the image in the 'svg image widget' whereas it's possible to do so in the traditionnal 'image' widget. Why is it so? Is there a particular reason for that or is it just an oversight?

Thanks you.

[Yoann KLEIN]

Hello @GMeur​,

Do you mean modifying the alpha value ? If yes, that is not possible with SVG because the alpha blending is different than the one used for alpha images. Several shapes can be superposed in a SVG image, so we cannot exactly determine with which will color you should blend your shape color with to give this "transparent" aspect. If you want to use alpha on a SVG, you can insert it inside a container, as my colleague Osman explained in this post.

Hope that helps,

/Yoann

[GMeur]

No, I meant changing the color of the icon itself. See how a 'color option' appears in the 'image tab' with the regular image widget, but not with the svg image widget. Is there a reason for that?

[Yoann KLEIN · Accepted solution]

Hello again,

If you use the classic Image widget, you SVG image (icon) will be generated as a .png image.

Modifying the color with a classic Image widget works because we chose to enable the users to modify the color of only the SVG images we know about, the ones contained inside the Assets>Stock>Material Icons theme. Those svg icons are only made with shapes of one color (black), so we know how to change the color and redraw the image.

How could the designer know how to change the color of a complex svg, with several shapes of different colors, e.g. a blue triangle, red cross and yellow box ? Should we modify the color of all shapes, only one of them, or the one in foreground ?

That's also why we didn't allow user to modify the color of other pngs, who are most likely constituted of more than one color. The fact that you cannot modify the color of a SVG Widget, even if you select an icon from the "Material Icons" theme, is because then the image will not be converted to a .png but will remains as a .svg, and we didn't implement this case in the Designer and the Framework code yet.

But I agree with you, it is very confusing in the TouchGFXDesigner interface to understand how that works, so I will discuss it with my colleagues, and we'll try to improve it.

If you want to understand better how TouchGFX interacts with .svg images, you can recommand you to take a look at this article.

Thanks for your input.

/Yoann

[GMeur]

Thanks a lot for your explanation.

Everything is clear now 🙂

[Yoann KLEIN]

Great, you are welcome 🙂

[EmbDev]

The image will not be converted to a .png but will remains as a .svg, and we didn't implement this case in the Designer and the Framework code yet.

Are there any plans to support this in the future? (changing the color of the default included svgs).

In Qt it is possible to change the color of icons, maybe that could help with inspiration of how to change the color of custom svg's.

[Yoann KLEIN]

Hello,

I will report that idea to my colleagues, thanks.

We know that some improvements are necessary. TouchGFX Stock and SVG images are brand new in the Designer, so it will still evolve in future versions.

/Yoann