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

Dashboard
1

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.

2

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.

<svg ....>
....
....
</svg>
3

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:

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)?

4

It should if formatted like this:

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

5

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:

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;
}
6

Fixed

.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;
}
7

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

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.

8

You can break the long lines with the backslash \

'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"/>\
9

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...