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

[Dennis_Baca]

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.

[mdemaris]

Dennis,
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.

[lrose]

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:

Drawing Tools in perspective

SVG’s are the way to do it (they aren’t the only way to do it, but they are probably the best way). You can copy this into a text file, save it as a .svg file and then drag it onto your view, this will give you a blank SVG. <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="50mm" height="50mm" viewBox="0 0 50 50" version="1.1"> </svg> From there it is just a matter of understanding how to wor…

Perspective, faster page

Okay, I had a bit of free time today, so here is a complete SVG solution. You could do the Label as SVG text as well, or a gauge needle if you wanted, I haven't gone that far. Just a little example of the power of using the Ignition Designer to add SVG elements. I didn't include the label for the example. Note: All of this (outside of the calculations needed to find the points for the shape) was done inside of the designer (yes I can be somewhat of a masochist at times. ). First a s…

How to add animation by HTML/CSS scripts in Perspective?

Okay, so it took me longer than I wanted (my laptop died), but I finally did get around to completing this, and I have to say I'm pretty pleased with the result. This was a fun exercise and I learned something good along the way. I will give you a disclaimer though, other than a rough idea of what an Azimuth Propeller is, I don't know much else. So for instance, I have no idea what the yellow triangle is supposed to indicate and so I didn't add it. I made some assumptions on how I think the re…

Perspective - Font Scaling with SVG?

It also opens up other interesting functionality. [image] Or even fancier! [image] Yep, just add the fontSize value to the style object. Since all of this is done in the designer, all of it is able to be bound. [svgtext] Here I created a second text path and I'm using the following expression binding to switch between the two. Wouldn't really recommend doing this with text, but just because it was fun and it can be done. if((toMillis(now(75)) % 75) >= 37,'#testPath','#testPath2')

[mdemaris]

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.

[mdemaris]

How do you embed an xml file?

Never mind, drag and drop!

[Dennis_Baca]

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.

[victordcq]

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

New Feature: Perspective Piping

welp... i just had to try it out didnt it Required version 8.1.22 Behold! JS INJECTED SVG CLICKER jsInjectedSvgClicker.zip (3.6 KB) edit: I made the value of the binding become the name it writes to in the view.custom props Be sure to set the custom prop back to null after handling your event so you can trigger the onchange events on the prop It should only detect things inside this view. Haven't fully tested it though.

[mdemaris]

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.

[Raphael]

Hello,

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