# Div.ui-svg still contains the fill:inherit !important tag

**URL:** <https://discourse.nodered.org/t/div-ui-svg-still-contains-the-fill-inherit-important-tag/57165>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [24 January 2022 19:20 UTC](https://discourse.nodered.org/t/div-ui-svg-still-contains-the-fill-inherit-important-tag/57165 "2022-01-24T19:20:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![letshin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/letshin/32/51665_2.png) [@letshin](https://discourse.nodered.org/u/letshin)\
**Post date:** [24 January 2022 19:20 UTC](https://discourse.nodered.org/t/div-ui-svg-still-contains-the-fill-inherit-important-tag/57165/1 "2022-01-24T19:20:38Z")

</div>

I updated to the 3.1 of the ui-svg version and have checked svg\_graphics.html and svg\_graphics.js in ~/.node-red/node\_modules/node-red-contrib-ui-svg, and the code doesn't contain the !important tag

```auto
div.ui-svg path {
    fill: inherit;
}

```

However, on loading a svg file I notice that my style="fill:red;" etc. tags are still overwritten by the default background. Inspecting the element shows me that the !important tag is still there

```auto
.svggraphics_af4851e6edb54d7a div.ui-svg path {
    fill: inherit !important;
}

```

Removing the !important tag gives me the colours that I want in the SVGs. Is there a way I can get rid of this please and why is this still showing?

Thanks.

---

<div class="post-metadata">

**Author:** ![letshin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/letshin/32/51665_2.png) [@letshin](https://discourse.nodered.org/u/letshin)\
**Post date:** [24 January 2022 19:41 UTC](https://discourse.nodered.org/t/div-ui-svg-still-contains-the-fill-inherit-important-tag/57165/2 "2022-01-24T19:41:35Z")

</div>

Just figured it out. Svg nodes retain their css tags from their time of creation, and so the new version doesn't overwrite this. The easiest way to change this seems to be to identify where all the tags are:  
`find . -type f -exec grep "div.ui-svg" '{}' \; -print`  
And then modifying all of them with a batch command. For me this was in a flows.json file. Solved the issue.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [24 January 2022 21:09 UTC](https://discourse.nodered.org/t/div-ui-svg-still-contains-the-fill-inherit-important-tag/57165/3 "2022-01-24T21:09:55Z")

</div>

Hi @letshin,  
Thanks for sharing your solution!  
Indeed the SVG node has set the css property once, but doesn't overwrite it afterwards (because the user might have changed it). And yes indeed the faulty css string keeps being used...  
Bart

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 February 2022 21:10 UTC](https://discourse.nodered.org/t/div-ui-svg-still-contains-the-fill-inherit-important-tag/57165/4 "2022-02-07T21:10:15Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.