# Creating animation-ready valve/pump SVGs **URL:** \ **Category:** Ignition\ **Tags:** perspective, ignition81\ **Created:** [April 29, 2021, 6:49pm UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172 "2021-04-29T18:49:00Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Cory.grube](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cory.grube/32/20476_2.png) [@Cory.grube](https://forum.inductiveautomation.com/u/Cory.grube)\ **Post date:** [April 29, 2021, 6:49pm UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/1 "2021-04-29T18:49:00Z")
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](https://draw.io) and import it into perspective. I can apply a tint to the entire object without issue. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/8/a8ed32283332397f57308ab84bca5b4bb50eb336.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/2/c25bc7f168fc9fd2eeeb79991eb14a1513037b5a.png) Ideally I want to color the valve head and body independently, like so: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/6/668b195eb37888c9910d7b2b648f8af8594ad33a.png) 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. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/b/0b515b9b70fdf165ca4ec420e62f117a3d474dac.png) What am I missing here? ---
**Author:** ![Cory.grube](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cory.grube/32/20476_2.png) [@Cory.grube](https://forum.inductiveautomation.com/u/Cory.grube)\ **Post date:** [April 29, 2021, 7:11pm UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/2 "2021-04-29T19:11:46Z")
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. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/f/bfde537532f8b1f7bc93421c30ef83df4a67a1cb.png) 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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/a/aa7fbf38ecc988e843452bfcc93fead0799be3c0.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/2/82b2ee66527d7f9817d45ba64ffad73f876c4340.png) ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [April 30, 2021, 12:36am UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/3 "2021-04-30T00:36:25Z")
Yeah, I don’t see any time I would ever use that default option 😕 ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [April 30, 2021, 2:44am UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/4 "2021-04-30T02:44:22Z")
Performance is the reason. Creating the nested components is expensive; for very large SVGs significantly so. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [April 30, 2021, 2:52am UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/5 "2021-04-30T02:52:15Z")
Expensive at runtime or design time? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [April 30, 2021, 3:24pm UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/6 "2021-04-30T15:24:18Z")
Both. ---
**Author:** ![beckya](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@beckya](https://forum.inductiveautomation.com/u/beckya)\ **Post date:** [April 6, 2022, 2:31pm UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/7 "2022-04-06T14:31:42Z")
Do you have any suggestions on what to do if you embed an svg image and there are no elements or image displaying? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/b/9be84d2d056440174a16642c6f2b950de2705d1f.png) ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [April 6, 2022, 2:52pm UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/8 "2022-04-06T14:52:36Z")
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? ---
**Author:** ![beckya](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@beckya](https://forum.inductiveautomation.com/u/beckya)\ **Post date:** [April 6, 2022, 3:24pm UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/9 "2022-04-06T15:24:33Z")
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](https://forum.inductiveautomation.com/uploads/short-url/l0SwWU2b3hQY0l9XsAbboJEtAAX.txt) (2.1 MB) ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [April 6, 2022, 3:33pm UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/10 "2022-04-06T15:33:36Z")
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 > [@\[BUG-11342\] Perspective - Can't draw any shapes](https://forum.inductiveautomation.com/t/bug-11342-perspective-cant-draw-any-shapes/20690/22): > > Not sure if worth mentioning, that if you do use Inkscape, you should save your SVGs as an Optimised SVG and not as an Inkscape SVG. It pulls all the crap out of the file. I use these settings fwiw: Edit: uncheck the top option, don't remove unused ids [image] [image] [image] Edit: maybe should uncheck the convert css to XML option ---
**Author:** ![beckya](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@beckya](https://forum.inductiveautomation.com/u/beckya)\ **Post date:** [April 6, 2022, 3:57pm UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/11 "2022-04-06T15:57:46Z")
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. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/9/092156e82fff69fd7be122cb102e14a1042f64fc.png) ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [April 6, 2022, 4:23pm UTC](https://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172/12 "2022-04-06T16:23:57Z")
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.