# Preserving/propagating svg element bindings **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [November 18, 2022, 6:38pm UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700 "2022-11-18T18:38:48Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![tcrucet](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@tcrucet](https://forum.inductiveautomation.com/u/tcrucet)\ **Post date:** [November 18, 2022, 6:38pm UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/1 "2022-11-18T18:38:48Z")
I've imported a complicated SVG and put various bindings and transforms on its elements, but I'm worried someday the graphic will need changing and re-importing. Would there be an efficient way to preserve and paste binding assignments and props from the old SVG to the new one, a sort of mass-paste? I'm thinking you can copy the JSON and just swap out sections that have been changed in a vector drawing program... is there a better way? ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [November 18, 2022, 7:37pm UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/2 "2022-11-18T19:37:17Z")
Unfortunately, no. A new Component in this context would almost definitely have a different structure - otherwise there would be no point. If it's only the attributes of the svg elements which are being changed, there might be a way... In theory, if you used an updated svg and that svg had EXACTLY the same structure, you could... 1. Place your "new" svg into the View. 2. Copy the View's JSON into your favorite text editor. 3. Copy the propConfig of the "old" svg component from the View's JSON. 4. Paste the "old" propConfig into the new correct place on the "new" svg. ---
**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:** [November 18, 2022, 9:11pm UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/3 "2022-11-18T21:11:40Z")
It really depends what changes in the SVG. If you're adding objects into it, that's easy, just embed the new svg into the page and copy the individual elements that were added into the existing svg with bindings. If you're changing existing elements, not so easy, as @cmallonee said. You could script it by processing the View's raw json, but you'd have to make sure you name all of your svg objects properly. It's not a simple task. It also depends _what_ you've bound. ---
**Author:** ![tcrucet](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@tcrucet](https://forum.inductiveautomation.com/u/tcrucet)\ **Post date:** [November 18, 2022, 10:41pm UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/4 "2022-11-18T22:41:58Z")
Instead of embedding one big complex SVG picture, it looks like it's better to just embed the SVG elements separately, copy over and modify bindings if needed, position and size them, and possibly erase or alter any other graphics from the original SVG if that's still around. There's a tradeoff: precise drawing in AI exported as one big picture (even though it's tough to work with once in Perspective--nothing can be easily moved around, and re-binding all the elements in an altered, re-imported image is even harder) _versus_ embedding smaller SVG pieces individually and trying to position them together properly in Perspective, but they are easier to work with once positioned. It would be great if you could embed a picture and break it apart as in Vision... ---
**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:** [November 18, 2022, 11:06pm UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/5 "2022-11-18T23:06:10Z")
Keep in mind it's always better to keep objects together in the one drawing/component so they don't resize with pixel inaccuracies which may make them look dodgy ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [November 18, 2022, 11:14pm UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/6 "2022-11-18T23:14:38Z")
> [@tcrucet](#): > > Instead of embedding one big complex SVG picture, it looks like it's better to just embed the SVG elements separately Typically one large SVG will load faster than a bunch of separate SVGs. But, to me the maintainability of multiple SVGs is easier than one large one. ---
**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:** [November 19, 2022, 1:05am UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/7 "2022-11-19T01:05:01Z")
Also remember that there is a performance hit with the number of objects that need to be loaded, so keeping your SVG’s to as few as possible will help, particularly with load times. ---
**Author:** ![tcrucet](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@tcrucet](https://forum.inductiveautomation.com/u/tcrucet)\ **Post date:** [November 20, 2022, 11:56pm UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/9 "2022-11-20T23:56:19Z")
I'm trying to add a big SVG to a coordinate container set to %, then add in individual labels for value display. Text can't come in on an SVG of course (using export to screens in AI), because it converts each letter to a path. But separate labels don't scale well with the SVG; I've tried wrapping them in little flex containers and using 1vw for font sizes, but that doesn't work too well either. What do you usually do in this situation? It does need to display some data, and I'd like to keep it responsive if possible. ---
**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:** [November 21, 2022, 2:44am UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/10 "2022-11-21T02:44:36Z")
It's been a long time since I used Illustrator, but can you export as an "optimised" SVG? I don't know what the equivalent term is in AI, but this is Inkscape terminology. This exports text out just fine as text not as shapes. E.g. ```auto Hel ``` And in Perspective: ```auto [ { "type": "ia.shapes.svg", "version": 0, "props": { "viewBox": "0 0 24 24", "elements": [ { "elements": [ { "id": "tspan8895", "name": "tspan8895", "text": "Hel", "type": "tspan", "x": "10.514604", "y": "14.286509" } ], "id": "text8897", "name": "text8897", "style": { "lineHeight": "1.25" }, "text": "Hel", "textAnchor": "middle", "type": "text", "x": "10.514604", "y": "14.286509" } ] }, "meta": { "name": "hel_0" }, "position": { "basis": "300px" }, "custom": {} } ] ``` Actually, it looks like 2 text objects are being added in the Perspective version... that's a bug ---
**Author:** ![tcrucet](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@tcrucet](https://forum.inductiveautomation.com/u/tcrucet)\ **Post date:** [November 21, 2022, 2:35pm UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/11 "2022-11-21T14:35:31Z")
I'm just learning it seems that AI has an issue exporting text without messing it up in IgP. I'm faster in AI for drawing, so I'm Exporting to SVG from there (which seems almost equivalent to Optimized), re-opening in Inkscape and adding text _there_... Then export from Inkscape, and delete the elements containing tspan. Previously I was fooled that AI couldn't export SVG text objects at all, it does, they just seem to dislocate to a larger default font. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [November 22, 2022, 7:40am UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/12 "2022-11-22T07:40:42Z")
update to the latest vrsion has some improved svg imports where text should work ---
**Author:** ![tcrucet](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@tcrucet](https://forum.inductiveautomation.com/u/tcrucet)\ **Post date:** [December 14, 2022, 10:29pm UTC](https://forum.inductiveautomation.com/t/preserving-propagating-svg-element-bindings/66700/13 "2022-12-14T22:29:49Z")
I've read some posts that recommend using scripting to drive SVG animations instead of dealing with bindings having to be manually redone every time you re-import. I've been trying to think of the best place for such scripts to live. Right now I'm thinking, maybe create a custom prop on the SVG, and bind it to an expression structure that looks at all the tags the SVG needs. Follow this with a script transform that traverses the SVG and updates elements in response to the tags; its return value is ignored. Maybe it calls on library scripts to supply style classes, colors, etc. to make it less cluttered. The basic traversal looks like (I got the idea from someone else's post): ```auto def transform(self, value, quality, timestamp): elements=self.props.elements for index in elements: properties=index.elements for subindex, subprop in enumerate(properties): if subprop.id=='derp': if value.blue: subprop['fill']['paint']='blue' elif value.green: subprop['fill']['paint']='green' return value ```