# Embedding of custom attributes of SVG elements

**URL:** <https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 23, 2024, 12:15pm UTC](https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598 "2024-07-23T12:15:38Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![electricschmidt](https://avatars.discourse-cdn.com/v4/letter/e/6f9a4e/32.png) [@electricschmidt](https://forum.inductiveautomation.com/u/electricschmidt)\
**Post date:** [July 23, 2024, 12:15pm UTC](https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598/1 "2024-07-23T12:15:38Z")

</div>

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:

```python
<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:

```python
{
  "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.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [July 23, 2024, 3:11pm UTC](https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598/2 "2024-07-23T15:11:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![electricschmidt](https://avatars.discourse-cdn.com/v4/letter/e/6f9a4e/32.png) [@electricschmidt](https://forum.inductiveautomation.com/u/electricschmidt)\
**Post date:** [July 23, 2024, 3:20pm UTC](https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598/3 "2024-07-23T15:20:48Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 24, 2024, 6:33am UTC](https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598/4 "2024-07-24T06:33:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![electricschmidt](https://avatars.discourse-cdn.com/v4/letter/e/6f9a4e/32.png) [@electricschmidt](https://forum.inductiveautomation.com/u/electricschmidt)\
**Post date:** [July 24, 2024, 7:37am UTC](https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598/5 "2024-07-24T07:37:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 24, 2024, 1:43pm UTC](https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598/6 "2024-07-24T13:43:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![electricschmidt](https://avatars.discourse-cdn.com/v4/letter/e/6f9a4e/32.png) [@electricschmidt](https://forum.inductiveautomation.com/u/electricschmidt)\
**Post date:** [July 24, 2024, 1:49pm UTC](https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598/7 "2024-07-24T13:49:26Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 24, 2024, 1:58pm UTC](https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598/8 "2024-07-24T13:58:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [July 24, 2024, 2:55pm UTC](https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598/9 "2024-07-24T14:55:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![electricschmidt](https://avatars.discourse-cdn.com/v4/letter/e/6f9a4e/32.png) [@electricschmidt](https://forum.inductiveautomation.com/u/electricschmidt)\
**Post date:** [July 24, 2024, 2:59pm UTC](https://forum.inductiveautomation.com/t/embedding-of-custom-attributes-of-svg-elements/93598/10 "2024-07-24T14:59:27Z")

</div>

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.
