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:

image

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.