# How to change the color of SVG Object in perspective

**URL:** <https://forum.inductiveautomation.com/t/how-to-change-the-color-of-svg-object-in-perspective/23629>\
**Category:** Ignition Early Access\
**Created:** [March 27, 2019, 5:59am UTC](https://forum.inductiveautomation.com/t/how-to-change-the-color-of-svg-object-in-perspective/23629 "2019-03-27T05:59:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![chris.roys](https://avatars.discourse-cdn.com/v4/letter/c/e9c0ed/32.png) [@chris.roys](https://forum.inductiveautomation.com/u/chris.roys)\
**Post date:** [March 27, 2019, 5:59am UTC](https://forum.inductiveautomation.com/t/how-to-change-the-color-of-svg-object-in-perspective/23629/1 "2019-03-27T05:59:26Z")

</div>

I import an SVG graphic in perspective but there is no option in props or style to dynamic the color of the shape.  
Only I can change background color not the lines.

 ![15536662833746796288281825815732](https://us1.discourse-cdn.com/inductiveautomation/original/2X/2/25a0c37866e63286a52694d8ed32a6dcac692d02.jpeg)

---

<div class="post-metadata">

**Author:** ![Sanderd17](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sanderd17/32/8735_2.png) [@Sanderd17](https://forum.inductiveautomation.com/u/Sanderd17)\
**Post date:** [March 27, 2019, 7:23am UTC](https://forum.inductiveautomation.com/t/how-to-change-the-color-of-svg-object-in-perspective/23629/2 "2019-03-27T07:23:20Z")

</div>

This is probably because you apply it on the SVG element (which doesn’t have a border), instead of to the individual paths.

I don’t know Perspective well enough on how you can define child selectors, but you’d need something like that:

> **[Descendant combinator - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator)**
>
> The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent,...

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [April 9, 2019, 3:58pm UTC](https://forum.inductiveautomation.com/t/how-to-change-the-color-of-svg-object-in-perspective/23629/3 "2019-04-09T15:58:31Z")

</div>

From what I can tell from your screenshot, it looks like you are setting style properties for the Icon (svg) Component, when you really want to be setting the color for the actual svg pieces.  
 ![59%20AM](https://us1.discourse-cdn.com/inductiveautomation/original/2X/c/cc0d28d4e482a54d00751cd245d4bdcc2c9f3457.png)  
In Icon.props, expand the available indices of the `elements` property (your case only has one index). The `fill` and `stroke` “paint” properties are what you should use to determine the coloring of the svg pieces.