Is it possible to change the color of an SVG image?

Questions
1

Hi all!

I’m creating icon buttons in my Babylon project and I’m thrilled that I can use SVG images instead of a sprite! I’m utilizing Google’s Material Design icons in SVG format. Is there any way to programatically change the fill color of the SVG icon in Babylon?

In HTML/CSS I would simply adjust the fill color using CSS to accomplish this. This is useful because I don’t have to maintain a separate file for each possible button state.

Here is a playground example showcasing how I’m currently building the button.

1 Like
2

I don’t think it’s possible as the image is not handled differently being svg or not when it comes to being drawn: it is blit with the context.drawImage method and the DOM image is passed as the first parameter. Setting the fillStyle property of the context before drawing the image does not change anything.

2 Likes