# Visibility attribute being stripped from SVG component

**URL:** <https://forum.inductiveautomation.com/t/visibility-attribute-being-stripped-from-svg-component/59411>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [May 10, 2022, 3:54pm UTC](https://forum.inductiveautomation.com/t/visibility-attribute-being-stripped-from-svg-component/59411 "2022-05-10T15:54:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [May 10, 2022, 3:54pm UTC](https://forum.inductiveautomation.com/t/visibility-attribute-being-stripped-from-svg-component/59411/1 "2022-05-10T15:54:59Z")

</div>

[This is for 8.1.15, Perspective]

I hand crafted a fancy SVG and embedded it into a Perspective screen. Then I manually added a visibility attribute (bound to a boolean value) to a subsection of the SVG in order to animate just that part:

![Screen Shot 2022-05-10 at 9.39.10 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/a/6ac1123317d72e1297325895925e78e49c56f22f.png)

But when I view the SVG in the session the visibility attribute is not there:

![Screen Shot 2022-05-10 at 9.43.03 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/c/dc8d6a44a5741cacd94c459031ed94ea74c47fa8.png)

Is there anyway to achieve what I want? (And have I correctly tried to add the visibility attribute?).

I know from previous conversations that because of the size of the SVG spec that Ignition doesn’t/can’t support all of the features when importing an SVG, but I am surprised that manually added attributes are being removed when the SVG is being spit out onto a screen. (I also noted that the name attribute was also stripped out)

---

<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:** [May 10, 2022, 4:05pm UTC](https://forum.inductiveautomation.com/t/visibility-attribute-being-stripped-from-svg-component/59411/2 "2022-05-10T16:05:49Z")

</div>

Looks to me as though you have it implemented correctly, however, according to [visibility - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility) browser compatibility is “unknown”.

As a workaround you could use the css attribute `opacity` on the style of that element and animate that between 1 and 0 to achieve the effect.

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [May 10, 2022, 4:24pm UTC](https://forum.inductiveautomation.com/t/visibility-attribute-being-stripped-from-svg-component/59411/3 "2022-05-10T16:24:59Z")

</div>

I don’t trust that link as compatibility is “unknown” for everything. That seems suspicious for an HTML attribute that has been around for a looooooong time.

However after trying your idea about opacity via the style (which did work), I tested manually adding the visibility attribute to the style:

![Screen Shot 2022-05-10 at 10.20.20 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/e/ae9cb47e9898289a31efe429fab7577b010231aa.png)

Which achieved what I wanted:

 ![Screen Shot 2022-05-10 at 10.23.43 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/e/4e604441d9015e73e1c2927690d81124c5e2a693.png)

It’s a non-intuitive way to do it, but it works for me.