SVG Export format to have nested groups, paths, circles, svgs and polygons in the designer

Hello everyone,
I have been dying to know how the SVG file of an Ignition logo was exported to have its shapes nested, more specifically, the ignition logo that’s in the header of the Demo project.

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.

Thanks in advance.

any luck with this yet? I am wondering how to use my own SVGs as well, and how to get the JSON structure attached to it.

The image shown above is from an early version of the Perspective module that, as far as I know, was never released publicly.

However, you can do a lot with SVG's with a little know how, here are some links:

Thanks Rose!

I have three of those links saved, lol. A lot of this goes right over my head for the moment, so I'm just playing with Inkscape before bed.

How do you embed an xml file?

Never mind, drag and drop!

Hey there!
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.

This might also interest you, this puts some extra js on the screen that allow you to "click" elements in the normal svg component

At this point, I'm not sure where I'm heading with SVGs. I am still a ways from developing our HMI screens in Perspective, and what we have in Vision we keep animation at a minimum.


Could you explain the JSON Structure and/or share your script, please ?
I would like to draw a warehouse blueprint and when I click on some item, I would like open a pop-up with specific details of this element.

Thank you :slight_smile: