Embedding of custom attributes of SVG elements

Ignition
1

I'm trying to find out if there's any way that custom attributes on SVG elements can be persisted to the json that is created when embedding an SVG in perspective? For example:

<g transform="matrix(4.9222 0 0 1 65.287 50.265)" name="pipe0" test="testval">
		<rect transform="rotate(-90)" x="-3" y="-8.6228e-7" width="3" height="6.762" ry="0" fill="url(#linearGradient19)" stroke-width=".097385" name="outer"/>
		<rect x=".0052824" y=".90528" width="6.7612" height="1.1894" fill="#a3a3a3" name="inner"/>
</g>

Seems to become:

{
  "type": "group",
  "transform": "matrix(4.9222 0 0 1 65.287 50.265)",
  "elements": [
    {
      "type": "rect",
      "fill": {
        "url": "url(#linearGradient19)"
      },
      "stroke": {
        "width": ".097385"
      },
      "transform": "rotate(-90)",
      "name": "rect",
      "x": "-3",
      "y": "-8.6228e-7",
      "width": "3",
      "height": "6.762",
      "ry": "0"
    },
    {
      "type": "rect",
      "fill": {
        "paint": "#a3a3a3"
      },
      "name": "rect",
      "x": ".0052824",
      "y": ".90528",
      "width": "6.7612",
      "height": "1.1894"
    }
  ],
  "name": "group"
}

and the test=testval attribute is lost in the embedding. I can see that the id attribute will sometimes be used for the name prop in the json but this isn't much good because ids need to be unique. Any help or insight anybody might have would be appreciated.

2

The SVG -> component parsing is manually done in our backend code and not something you can intercede in. So, generally you're at the mercy of whatever subset of the massive SVG spec we've chosen to parse.

You can embed your SVG as an image instead to get full fidelity, but at the expense of the individual properties being exposed.

1 Like
3

Yeah I figured there wasn't a great deal I could do, I was hoping for a setting to toggle somewhere perhaps that would copy the custom attributes as name/value pairs into the json that is created. Never mind, thanks anyway!

2 Likes
4

Why would you need these custom attributes? What are you trying to do with them?

5

Mainly I just want to be able to find elements faster in the elements array. I have a name attribute on the elements in the SVG that I want to be able to use when they are parsed into components in ignition. Like I mentioned, I can see that the id attribute is parsed and is used as the name and id values in the component's json, so I think that's the way to go really.

6

Yh that will be the way to go, i also use the name attribute for my svg clicker as its the only thing usable out of the gate.

7

It's a shame because the name of the custom attribute I'd added to my svg components was name but it looks like the SVGImporter just obliterates those names and replaces them with whatever was in the id.

8

yh... You could always just use a rare property you dont ever use that exists (and igntion recognizes)
The css will just ignore it if the value doesnt make any sense

9

There are certain attributes that are supported by the SVG spec which Ignition has reserved. name and type are the ones I’ve run into.

Realistically name and ID are fairly redundant IMO anyway.

10

Yeah, it just so happens the first two I tried to use to no avail were both name and type, bit of an unfortunate coincidence.