[Announce] node-red-contrib-ui-svg

Yes but I can't do much about that. When I open that image in Chrome on my desktop computer, then it is large. When I open it in Chrome on my Android smartphone, then it is small. The browser has an entire screen available, and they try to show it as good as possible.

When you open the same image in the SVG node, then it becomes an entirely different story:

  1. Depending on dashboard settings (see above widget size, group width, ...) the dashboard will give the SVG some available space, based on what "you" have specified. So the SVG node will fill the space that you have offered to it. It cannot choose anything: it gets nothing more, or nothing less...
  2. Then you say to the SVG node: show this image and use 100% of the available width and height. So the node will shrink or stretch the image to fill the available space, whatever the original size of the image was. It is a dumb node: it does only what have asked it to do...

When you say to the SVG node that it has to show the image on 200% of the available space. Then the node will make try to display your image on twice the available space. But of course the SVG node is not able to stretch your physical screen. Otherwise I would either have gotten a lot of lawsuits, or I would be rich by now :wink: . So you will see only part of the picture, i.e. the part of the (stretched) image that fits on the available space. Something like this:


I "assume" you mean that you have a teeny weeny image, and you ask the SVG node to show it at 200%? Then the SVG node will do what you have asked it to do: to stretch the teeny weeny image across a large area.

I assume with "normal" size that you mean not stretched or shrinked?
Have not tried it, but I would expect that you have to specify then your fixed image dimensions in the image element like this (instead of 100%):

<image width="600" height="400" ...

I would expect that the SVG node will try to draw your image in an area of 600x400 pixels. But of course on a small screen, it won't have that much of available space on the screen. So you most probably will get scrollbars then (because the browser can only show part of the image).

That is not enough information to allow me to help you. Can you share some screenshots (of your settings screen containing the path, of your file explorer showing the directory with the image ...), or other kind of info that can help us troubleshooting...

The problem could be on the server side (while trying to read the image from the filesystem), so you should have a look at the Node-RED log. But the problem could also be on the frontend side (while trying to request the image from the server), so you should also have a look at your browser console log (via the "developer tools" menu of your browser where your dashboard is displayed).

I cannot figure out what is going wrong on your computer, only based on "something" and "totally". My paranormal capabilities are still not mature enough :wink:

Okay, first of all thanks for your reply! :slight_smile:
I try to make it more understandable:

I copy this from above:

At Dashboard:

If I change the area:

Then at Dashboard:

And if I try the Editor:

In Dashboard:

Hope this is better :smiley:
Thanks for your help!

1 Like

You have no idea... :+1:

It doesn't happen ofter, but I'm flabbergasted...

The first thing that I do all my UI nodes, is setting the CSS width and height (of the parent DIV element) to 100%. Just to make sure that the UI element nicely fits the available height.
But it seems this is not available on the SVG node:

<div class='ui-svg' id='svggraphics_` + config.id + `' ng-init='init(` + configAsJson + `)'>` + svgString + `</div>

So I thought that perhaps I have removed this accidentally in a recent release. But when I look at the commit history, it looks like this has never been added in the svg node in the past...

When I add it manually in my Chrome debugger:

Then it is indeed solved:


But it is nearly impossible that this has always been like that. The SVG node has been downloaded already 12907 times, and nobody (inclusive myself) has ever seen it. Until now ...

@Steve-Mcl : do you remember anything about that? I cannot explain that this has never been detected before by anybody. My old brain is not functioning well anymore :roll_eyes:

Sorry for the new Problem :smiley:
I tried it with Opera (my default browser) firefox and a minute ago with chrome ... always the same :confused:

I will have tomorrow a deaper look on it.
If there any ideas or more information needed, please tell me.

Yes that is normal. If the SVG node doesn't set 100% width and height on it's parent DIV element, then the browser (Chrome, Safari, Firefox...) won't stretch it to fill the available area.
I can fix that very easily, but would like to understand first why that has never been reported before.
Just don't get it...
PS. you don't need to have a deaper look on it, since it is a bug in the svg node...

Okay, I wait for this. No stress please! Thanks for all the work! :slight_smile:
Perhaps all other 12907 think, they are to stupid, like I do ... because over 12000 have it run.
And they don´t dare to ask!? :smiley:

1 Like

Meanwhile you can experiment with the fix, by installing the node directly from my Github account (since it is not published on NPM yet!). By running following command in your .node-red folder:

npm install bartbutenaers/node-red-contrib-ui-svg

No the problem is that it works fine for them ...
If you look e.g. at this dashboard from another user.
I simply cannot explain that it fitted the entire area nicely :exploding_head:

Although when I look at his SVG source:

<svg x="0" y="0" height="100%" viewBox="-0.1964024156332016 -0.0687660425901413 1000.392822265625 350.1374816894531" width="100%" preserveAspectRatio="xMidYMid meet">

I assume that the width and height of the viewbox force the browser to fill the available area anyway (see stackoverflow).

Just don't want to break existing flows: incorrect resizing, wrong aspect ratio, ...

If anybody has any ideas/suggestions, please share them!!!

1 Like

Hello again :slight_smile:
I have install it, from your lokal copy.
Now your example works "normal" :smiley:

But if I only make a easy example with the editor:

Save it

And on the Dashboard:

Still the same ..

If I change it from 100 to 100% in the svg code

Then it gets bigger:

But still cut off!?

Help Please! :smiley:

PS. Okay, I helped myself! :slight_smile:
I also have to make the viewbox bigger, then it works correctly.
But I think, if I paint something in the editor, the "normal" way should be, that it shown completely on the dashboard. Or am I wrong and it´s normal to paint something, save it and manually set the area correct?

SVG is tricky & without meaning to sound uncaring, not really a node-red (or Bart) issue.

As you have already demonstrated it is possible to set the height and width.

We are not SVG experts - we only wrote the node to make it easier to add SVG to node-red dashboard. So i'm afraid you are going to have to do a bit leg work & read up on SVG positioning / sizing / scaling.

Below is a link to a very good guide - have a read, have a play, see if you can solve it yourself...

1 Like

Okay, thanks for the Link, I will have a look at it!

Two Points are still open for me:

  1. Will the changes got into the "normal" version? (sorry for my often use of normal, don´t have a better word!)
  2. And where can I find information, why the graphic out of my nodered data dirctory isn´t loaded?
    I get no error message in node red.

Help myself again :smiley:
I dont have to use the completed path, only the path from node red to the picture. (In my case /data)
Know it works!
Thanks a lot! Rest is only try and error :smiley:
Please tell me, if the changes dont go in the "normal" Version, then I have to find a different way.

Thanks for help and all your work!

Do you mean whether my fix from Github last night will be published later on NPM?
If so, of course but I want to get first an idea whether this has impact on other users (for which it is currently working correctly already due to e.g. a finetuned viewbox).
I hope to get some feedback from users here... And if don't get feedback, I again will have to import some flow that users have been shared in the past, and test it again all on my own ...

As I have explained above already:
The problem could be on the server side (while trying to read the image from the filesystem), so you should have a look at the Node-RED log. But the problem could also be on the frontend side (while trying to request the image from the server), so you should also have a look at your browser console log (via the "developer tools" menu of your browser where your dashboard is displayed).
I have already added quite some logging for this (e.g. when the specified file doesn't exists ...), so I assume there must be something logged somewhere ...

Are you sure the filename is correct? Are the file permissions ok, so Node-RED can read it?
I have been trying all evening to let if fail, but keeps working fine here (both in Drawsvg and dashboard) ...
My time is up for today, but just a thought that suddenly popped up in my head now: can you share the generated SVG string (from the "SVG" tabsheet). I'm now wondering whether DrawSvg generates "href" or "xlink:href", because currently the SVG-node only supports the latter one for local images. So if that would be the case, then it is normal that you don't get any errors because it is simply not supported yet ...

Like Steve already explained, we have created an SVG node to support SVG inside Node-RED. But of course that means you can only use it when you know SVG...
However to make it usable for a broader audience, we have integerated DrawSvg. So in that perspective I understand your reaction: you draw something in DrawSvg, and you expect it to be displayed a bit similar at least in the dashboard. Without having to mess in the SVG source with viewboxes and svg width and height attributes ...
Therefore I have contacted to the author of DrawSvg about this, whether we can provide in the near future a solution for this. Cannot promise anything yet before I have discussed this with him. You will need to have patience ...

For me everything fine now! Thanks a lot.

I have found a tool for a floorplan:
Sweet Home 3D
Can be saved in svg and import in the node. Works great for me!

1 Like

After many years of waiting, there are finally many tools that can export to SVG.

If you have access to MS Office, recent versions of PowerPoint can save to SVG very nicely.

I believe Sketchup also has SVG export and has a free version. I've used Sketchup in the past to knock up architectural views to see if a house loft extension would fit, how much room it would create, and what it would look like. It lets you do things that many of the cheap/free home 3d tools won't let you - for example, one of the walls of our house is 14 degrees out of true. :wink:

I have done a test myself based on someone else his flow (which I fetched from this Github issue). It looks to me like the SVG drawing still fits the available space in the dashboard:

So I consider this fix as working correctly, which means it will be published on NPM in the next minor version of the SVG node...

1 Like

Published on NPM as version 2.2.1:


Other minor improvement is that now the events can be reordered, which seemed to be useful when lots of events had been added (and things have grown 'organically'):



Hello again :wink:

I have done a lot of things in my svg note and nearly anything works great.
But with on of my workarounds, I´m not realy happy.
Perhaps someone have a better idea?

The problem is, if the page with the svg will be reloaded, not every sensor sends this stats again.
At the moment my workaround is, to loop the stats, so they will always be send. But that is a lot of data sending, only for the moment the page will be reloaded.
Is there a way to get the current stats without my workaround?

Thanks in front!

Perhaps this example flow might be a place to start. And combine that with this ui_control proposal, in case a new dashboard client connects.

1 Like
<use xlink:href="#pix-cancel" x="604.245" y="246.37601" height="49.898998" style="vector-effect:non-scaling-stroke;fill:#bc8f8f;stroke:#000000;stroke-width:1px;visibility:hidden" id="offline_mplug5" width="49.898998" transform="translate(-129.40055,140.71426)"></use>

How do I make this item visible via msg.payload please ?

I have tried

`msg = {payload:{
"command": "remove_attribute",
"selector": "#offline_mplug5",
"attributeName": "visiblity"


Hi @smcgann99,

I temporarily don't work with Node-RED at the moment, so cannot test this. But when you read the related section in my readme page, I assume it should work like this:

  1. Give you "use" element a unique id:
    <use id="my_use_id" ...>
  2. Hide the "use" element by injecting this message:
       "command": "set_attribute",
       "selector": "#my_use_id",
       "attributeName": "visibility",
       "attributeValue": "hidden"
  3. Show the "use" element by injecting this message:
       "command": "set_attribute",
       "selector": "#my_use_id",
       "attributeName": "visibility",
       "attributeValue": "visible"