# Add style for individual elements in embedded svg?

**URL:** <https://forum.inductiveautomation.com/t/add-style-for-individual-elements-in-embedded-svg/94681>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [August 15, 2024, 7:45am UTC](https://forum.inductiveautomation.com/t/add-style-for-individual-elements-in-embedded-svg/94681 "2024-08-15T07:45:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [August 15, 2024, 7:45am UTC](https://forum.inductiveautomation.com/t/add-style-for-individual-elements-in-embedded-svg/94681/1 "2024-08-15T07:45:49Z")

</div>

I would like to add style for individual elements of an embedded svg.  
those property seems to have no effect.  
Is it the expected behaviour ?

---

<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:** [August 15, 2024, 10:26am UTC](https://forum.inductiveautomation.com/t/add-style-for-individual-elements-in-embedded-svg/94681/2 "2024-08-15T10:26:42Z")

</div>

What type of style are you trying to apply, and what type of element. Some styles do not affect all element types. Sometimes it’s because the element expects an attribute to be used for that type of styling.

I apply styles to SVG elements all the time, for things like animation and transformations.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 15, 2024, 11:41am UTC](https://forum.inductiveautomation.com/t/add-style-for-individual-elements-in-embedded-svg/94681/3 "2024-08-15T11:41:49Z")

</div>

Also check that your SVG props aren't overriding your styles prop, like a fill or other props.. (sorry can't be more specific, I don't remember them off top of my head and not at laptop)

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [August 15, 2024, 3:07pm UTC](https://forum.inductiveautomation.com/t/add-style-for-individual-elements-in-embedded-svg/94681/4 "2024-08-15T15:07:58Z")

</div>

Yes it works. I missed that the property in style was overrided by another one in the element.  
Deleting it solve the issue. Thanks !

A bit difficult to find the right element when the svg has plenty elements,  
but I've created a function to delete svg group, and with an id filled in the drawing tools, it's more simple to select element in the array with ignition designer property filter. Still a cumbersome workflow, especially if the svg has the be modified, but 8.3 will probably help us a lot !