Why am I wondering? Well, a few months ago i worked with some svg’s and I needed to make these “Interactive” what I wanted to do with the different shapes of the svg is to click on them/tie an event on them, maybe changing their style, stuff like that, to do this I needed to either display the SVG using the separate elements of it as thei individual containers or have an SVG element structured like the one thats on the Demo project. I really wanted to go with the latter, so I started researching to be able to export an SVG formatted so that ignition could display it like that. Could not find anything, tried many different SVG formats, but I just could not find it.
Finally the work around I found was to copy the Ignition Icon, and paste the ignition Icon on a text editor (VS Code) to look at the JSON string of the “component” and I found how the SVG was structured within Ignition, and it is quite different from how perspective imports SVG components to the designer, where it is shown as only 1 component/container, with nothing nested, and the elements within the SVG are nested within the container’s properties (self.props) like so:
I finally ended up making my own JSON structure mimicking the structure of the logo, to get the elements nested within containers, and being able to add events to each and everyone of the SVG layers/elements. However, this workaround I found was time consuming and it has some weird behaviours, so I would like to know if there is a special format to export SVGs, and have them show like the designer shows them like the Ignition logo in the demo project.
Well, I made a little script to convert the svg's I wanted to the correct JSON structure that results in something just like the pictures above, it takes a little bit of extra time to get them there, but yeah. It allows for me to make interactive SVGs. what are you looking to do specifically?
Because really my only use case is knowing where I am clicking on the SVG, or where I am hovering and run scripts and such based of of that! Of course, I know that there is a lot of potential in that hahaha.