If you were careful with how you added new elements into the SVG, you could avoid breaking the original bindings. You just need to embed the updated SVG, copy the props.elements and then paste over the top of the existing embedded SVG. However, if you stuff up and change the order of your elements, the bindings could become mismatched to their elements and now apply to the wrong SVG elements... not ideal
Yeah, I agree. Hence my theory on breaking down the layout to small, manageable chunks, where say each machine was an individual drawing, and then just overlay them. If you break something, it’s only a small bit.
I thought I had a good plan, but now I realize I know less than I thought.
Nadar’s scripting method seems interesting to explore. I can see the benefit of being resilient to layout changes.
I was hoping to expose some proven method or some common traps. I can see that I need to learn more about Inkscape and how to optimize SVGs for Perspective. Any good resources out there?
Here are a couple of posts with good information pertaining to Inkscape.
For relatively simple SVG's here is the way that I do it.
2 Likes
I hadn’t noticed the embed feature on the image library but I compared one of my SVGs in Embedded mode (right) vs Image Library mode (left).
The embedded one is missing a lot of detail and skews the color overlay when I resize it.
My conclusion is that the embedded version is good for lower detail SVGs and image library is good if you want to have higher detail. It’s possible I’m doing something wrong with my embedded one. I just drug the svg onto the form and selected the “embed” option. On the other hand, I like the idea of embedded SVGs for animation capabilities and lack of reliance on the image library.
We animate changeable valve paths for process valves on some projects so I need the overlays to scale properly for it to look good.
Am I doing something wrong?
PS
I’ve also noticed that some of the more fancy gradients you can do in inkscape will not show up in Ignition when you embed the SVG in the image library.
I wonder if the difference with the embedded version is the stroke width (and maybe other parameters) either missing or the value (for example .5) is a string and you need to edit it to 0.5?
The stroke is definitely different because the embedded one shows a fine stroke width and the unembedded one shows a thick one. I could go into it and modify the stroke but several of the gradients don’t render at all.
I don’t know anything about how to fix the gradients, sorry. But there are some much cleverer people on here than me, that likely will…
We’re actively working on improving our parsing of SVGs with more complicated features. Nothing to share yet, but it looks promising.
13 Likes
Like +1!
I guess you can’t say how far away this is, this year or next?
I wish it includes SVG filtering effect too
Are you talking about a global always-running script that controls the svg elements on a view? That watches tags and then searches for the appropriate element on that view to change its property? Where would that sentinel script live in the project?
Yes exactly. I do this instead of binding 500 item manually.
Create a property in view and add now(2000) and add script transform after it and out your code
I wonder how efficient this is for say, 150 clients?
I was thinking about using an expression structure to look at multiple tags all at once and react to them in a script transform. Is this the approach you use? I've heard of people using byte arrays.
In your python script do you programatically traverse the JSON to look for uniquely named layers and object ids? Or do you hard-code the paths (e.g. "if (some condition): self.props.elements[0].elements[2].fill=blue")? If the latter case it seems it would eventually break the script with successive altered SVG imports.
I'm fairly sure Nader finds the ids he assigns them and doesn't hard-code their "bindings". Hard-coding would half defeat the purpose of using the script afterall
Just after I finish struggling with svgs in the large project I'm working on, I'll bet IA are going to release drawing tools in Perspective, and it's going to be the best thing ever.
After I've shed a tear or two, I'll re-do all of the graphics and it will be a beautiful thing... 
1 Like
how's the gateway handing all of these svgs on multiple clients opening at the same time?
Yeah, probably. I'd imagine it'd be easier if your're a Python veteran. It seems like there should be a clean way to traverse JSON within an unknown amount of nesting in search of a unique id, then build a path to a nearby fill or classes property to animate. So far all I've found are techniques involving generators. I've found out that just referencing a needed property in script actually creates it, and then there's the elements.pop() function to get rid of conflicting properties...
Use Ignition very long, and you'll become one. (:
5 Likes