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

2 Likes

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.

2 Likes

Expensive at runtime or design time?

Both.

Do you have any suggestions on what to do if you embed an svg image and there are no elements or image displaying?

Looking at your Props section, it looks as though the 1 element has no properties assigned to it.

Can you post the SVG’s XML?

It’s massive, too massive to post apparently. Any recommendation on how to communicate back to the graphic designer on what I need?
XML.txt (2.1 MB)

I'm guessing you made this in a third party app like Inkscape?

If it was Inkscape then make sure you are saving it as an Optimised SVG

Thanks, I am not sure what program was used, however I have opened it in inkscape and tried this. Here is what I have then it says the file could not be saved once I hit ok.

I’m not sure. Looks like it was created with Adobe Illustrator, there is something in the file which Ignition is baulking at though, because when you try to embed it, nothing shows up.

However, this is a huge file. If you need to animate it, then perhaps, but even then I would be very cautious. You might be better off creating separate SVG’s for the things which you need to animate and layering them over a base SVG.

If you don’t need to animate it then you should absolutely use the Save and Link option in this case. If you do that the SVG will be visible.