# Dashboard background image - can the template node accept raw SVG code?

**URL:** <https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333>\
**Category:** Dashboard\
**Created:** [29 March 2021 04:59 UTC](https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333 "2021-03-29T04:59:14Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [29 March 2021 04:59 UTC](https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333/1 "2021-03-29T04:59:15Z")

</div>

Hello folks,  
I am trying to setup a dashboard with a CSS coloured background and a overlaid image/logo (using the template node), and I want to apply opacity to the image/logo without effecting anything else.

To get this working, it seems that I need to modify the SVG code to include opacity for the each fill section (which is fine and I can do), and I can't use the original image/logo URL.

The ui\_svg\_graphics node is able to accept raw svg code, which is really nice because the image/logo information is stored within the flow and the colours/opacity can be modified directly.

Is it possible to insert raw svg code into the template node CSS to display as a background image, instead of having to refer to a URL or image file stored locally (which also requires the NodeRED settings to be manually updated)?

Many thanks in advance.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [29 March 2021 05:13 UTC](https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333/2 "2021-03-29T05:13:16Z")

</div>

Just copy the raw SVG data into the `ui_teplate` and it should be displayed. Just be sure that starting and ending tags are correctly included.

```auto
<svg ....>
....
....
</svg>

```

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [29 March 2021 06:05 UTC](https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333/3 "2021-03-29T06:05:47Z")

</div>

Thanks so much for your reply and help hotNipi and great to hear that it 'should' work.

I already tried a few variations of that (after some googling) but had no luck getting it to work yet, I think the complication I have is that I am attempting to specify the background colour and SVG image in the same `background` property.

For example, excluding the SVG image code:

```auto
body.nr-dashboard-theme {
    background: image SVG code here, radial-gradient(circle, rgb(0 102 255) 0%, rgb(0 51 128) 75%, rgba(0, 20, 51, 1) 100%);
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: 30%, cover;
}

```

Is that arrangement meant to work (when raw SVG code is used)?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [29 March 2021 06:09 UTC](https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333/4 "2021-03-29T06:09:54Z")

</div>

It should if formatted like this:

```auto
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ....

```

EDIT: you have multiple items .... so the property name should be `background`

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [29 March 2021 06:51 UTC](https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333/5 "2021-03-29T06:51:46Z")

</div>

Thank you again, I have tried that and some variations but can't get it to work/display.  
This is what I have at the moment with a simple SVG lightglobe image:

```auto
body.nr-dashboard-theme {
    background: url("data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <path id="svg_1" fill="none" d="m0,0l24,0l0,24l-24,0l0,-24z"/>
  <path id="svg_2" d="m9,21c0,0.5 0.4,1 1,1l4,0c0.6,0 1,-0.5 1,-1l0,-1l-6,0l0,1zm3,-19c-3.9,0 -7,3.1 -7,7c0,2.4 1.2,4.5 3,5.7l0,2.3c0,0.5 0.4,1 1,1l6,0c0.6,0 1,-0.5 1,-1l0,-2.3c1.8,-1.3 3,-3.4 3,-5.7c0,-3.9 -3.1,-7 -7,-7z"/>
 </g>
</svg>), radial-gradient(circle, rgb(0 102 255) 0%, rgb(0 51 128) 75%, rgba(0, 20, 51, 1) 100%);
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: 30%, cover;
}

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [29 March 2021 07:08 UTC](https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333/6 "2021-03-29T07:08:40Z")

</div>

Fixed

```auto
.nr-dashboard-theme {
    background: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title><path id="svg_1" fill="none" d="m0,0l24,0l0,24l-24,0l0,-24z"/><path id="svg_2" d="m9,21c0,0.5 0.4,1 1,1l4,0c0.6,0 1,-0.5 1,-1l0,-1l-6,0l0,1zm3,-19c-3.9,0 -7,3.1 -7,7c0,2.4 1.2,4.5 3,5.7l0,2.3c0,0.5 0.4,1 1,1l6,0c0.6,0 1,-0.5 1,-1l0,-2.3c1.8,-1.3 3,-3.4 3,-5.7c0,-3.9 -3.1,-7 -7,-7z"/></g></svg>'), radial-gradient(circle, rgb(0 102 255) 0%, rgb(0 51 128) 75%, rgba(0, 20, 51, 1) 100%);
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: 30%, cover;
}

```

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [29 March 2021 09:07 UTC](https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333/7 "2021-03-29T09:07:26Z")

</div>

Great, it's working for me as well - you are a magician! 😀

Thank you so much for taking the time to get that working, your help is greatly appreciated; I would never have figured that out.

So from what I can tell, it seems there were 3 issues, 1- the entire SVG code must be on a single line (which makes it a little difficult for complex SVG files, but better than nothing), 2- `url("data:..` changed to `url('data:..` and 3- `</svg>)` changed to `</svg>')`.

I will try to apply the same format to my more complex SVG image.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [29 March 2021 09:27 UTC](https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333/8 "2021-03-29T09:27:53Z")

</div>

You can break the long lines with the backslash `\`

```auto
'data:image/svg+xml;utf8,\
    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">\
    <g><title>Layer 1</title>\
    <path id="svg_1" fill="none" d="m0,0l24,0l0,24l-24,0l0,-24z"/>\

```

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [29 March 2021 10:29 UTC](https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333/9 "2021-03-29T10:29:00Z")

</div>

Awesome, once again, thank you very much for that info, I have just reformatted the SVG code using backslashes. It is so much easier to load up and modify on the fly now...

---

<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:** [12 April 2021 10:29 UTC](https://discourse.nodered.org/t/dashboard-background-image-can-the-template-node-accept-raw-svg-code/43333/10 "2021-04-12T10:29:50Z")

</div>

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