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

10

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