Change color of SVG

[akshayr-mecha]

Is is possible to change color of SVG?

[simbleau]

Is is possible to change color of SVG?

I assume you mean at runtime. I knew someone would want to do this eventually :)

You can change Lottie colors at runtime, so a no-code solution would be to convert your SVG to a 0 frame (static) lottie and do color swapping on the lottie layers via the Theme component.

But to answer your question, it is not supported. When you load an SVG, it is optimized for performance. On load, it is transformed once into a vello Scene, stored as an asset (VelloSvg) and then re-used every frame. You can apply transforms, but not change colors, since the document structure is lost during the conversion.

Here's how I would implement it in my own project:

• Create an intermediate structure, like struct MyColorChangingSvg(usvg::Tree); - You can get a usvg::Tree via bevy_vello::vello_svg::usvg::... (there's some method there to convert string to Tree hierarchy)
• Make modifications to the tree directly, such as changing colors for a given layer name. This can get messy easily, though, SVG is a huge spec. ;)
• You can turn this into a vello::Scene via bevy_vello::vello_svg::render_tree(&tree).
• Wrap it, e.g VelloScene::from(vello::Scene) and render that.

[simbleau]

I was waiting off on implementing dynamic color reassignment until work is done to complete a retained-scene structure in vello for runtime modifications (This would've ideally been used by velato as well, which implements its own runtime model in support of the lottie spec).

@waywardmonkeys Was that work going to go into interpoli or some other crate? Is there an update on work being done there?

[RobertBrewitz]

@akshayr-mecha The method outlined here might help as well, but it's not very performant https://github.com/linebender/vello_svg/issues/7