Creating animation-ready valve/pump SVGs

Since there are no drawing tools in Perspective yet, my understanding is that I need to create SVGs for any drawn objects (pump, valve, etc). I’ve been able to create a basic valve SVG in draw.io and import it into perspective. I can apply a tint to the entire object without issue.

image image

Ideally I want to color the valve head and body independently, like so:

image

I can’t figure out how to do this, but I’ve seen examples of it on the forum. Even the IA Perspective demo app seems to be capable of this, though I don’t understand how to replicate it in my project. The demo uses a ‘Drawing’ component which I seemingly don’t have access to.

What am I missing here?

Solved my own issue! I was so close.

When I originally imported my SVG to my view, I used the save and link option. When using that, I guess you can’t control any individual properties of the SVG, as it gets embedded via the Image component.

If you directly embed it, you get the Drawing component that confused me in the original post. From here you can directly edit/bind to elements of the SVG.
image

1 Like

Yeah, I don’t see any time I would ever use that default option :confused:

1 Like

Performance is the reason. Creating the nested components is expensive; for very large SVGs significantly so.

1 Like

Expensive at runtime or design time?

Both.