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

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063>\
**Category:** Share Your Nodes\
**Created:** [23 October 2019 21:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063 "2019-10-23T21:38:54Z")\
**Posts on this page:** 20\
**Page:** 4

<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:** [8 January 2021 20:59 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/64 "2021-01-08T20:59:45Z")

</div>

Hi @vkuehn,

> [@vkuehn](#):
>
> can you give me a hint how to avoid this scrollbar

The following flow loads a 600x400 image (generated via [https://dummyimage.com/](https://dummyimage.com/)) and shows it inside the SVG:

```auto
<svg width="100%" height="100%" enable-background="new 0 0 250 250" xmlns="http://www.w3.org/2000/svg">/svg> 
   <image width="100%" height="100%" xlink:href="https://dummyimage.com/600x400/000/fff" />
</svg>

```

So the SVG fits (100% width and height) the available are, which has been allocated by the dashboard. And the image fits (100% width and height) into the SVG drawing.  
The result is an image fitting nicely:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1e5105eb8e1d18ca9d87058461f38c2d5a9a7a57.png)

```auto
[{"id":"9d8d5a1e.a63e98","type":"ui_svg_graphics","z":"7f1827bd.8acfe8","group":"2fa9557d.3cbe1a","order":0,"width":"6","height":"5","svgString":"<svg width=\"100%\" height=\"100%\" enable-background=\"new 0 0 250 250\" xmlns=\"http://www.w3.org/2000/svg\">/svg> \n<image width=\"100%\" height=\"100%\" xlink:href=\"https://dummyimage.com/600x400/000/fff\" />\n</svg>","clickableShapes":[{"targetId":"#light_living","action":"click","payload":"light_living","payloadType":"str","topic":"light_living"},{"targetId":"r","action":"click","payload":"r","payloadType":"str","topic":"r"}],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":true,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"name":"","x":700,"y":2600,"wires":[[]]},{"id":"2fa9557d.3cbe1a","type":"ui_group","z":"","name":"Fit available area","tab":"680a9e2f.a6726","order":1,"disp":true,"width":"6","collapse":false},{"id":"680a9e2f.a6726","type":"ui_tab","z":"","name":"SVG size","icon":"dashboard","disabled":false,"hidden":false}]

```

> [@vkuehn](#):
>
> and maybe how you got a even bigger map/svg loaded ?

So you can load even bigger images, it will still fit.  
Is this an answer to your question, or did I misunderstood it??

---

<div class="post-metadata">

**Author:** ![vkuehn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vkuehn/32/34805_2.png) [@vkuehn](https://discourse.nodered.org/u/vkuehn)\
**Post date:** [8 January 2021 21:09 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/65 "2021-01-08T21:09:15Z")

</div>

yes the first part answers how to load images and than write over them with svg..cool!  
My assumption was that the floorplan is all svg. So yes it is a good help and surprising

Is there a way to make the widgets larger ?

---

<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:** [8 January 2021 21:14 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/66 "2021-01-08T21:14:57Z")

</div>

Do you mean this:

![svg_width](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/780e1b12d76f1f5d8d089a63e29e7b2e79db4634.gif)

---

<div class="post-metadata">

**Author:** ![vkuehn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vkuehn/32/34805_2.png) [@vkuehn](https://discourse.nodered.org/u/vkuehn)\
**Post date:** [9 January 2021 12:48 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/67 "2021-01-09T12:48:51Z")

</div>

exactly but for me it stops raising limits after six horizontal  
!?  
I have fiddeled with these but doesn't show any differences  
 ![DashboardDefaults](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7a6ae5f8cc2cb9d3f184715fb7f6276693065786.png)

btw how do you do these funny videos ?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [9 January 2021 15:16 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/68 "2021-01-09T15:16:35Z")

</div>

You have to first adjust the group size that the widget sits in... then you can make the widget as large as the group width...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/16e1cb4a62d928d36755f960de678f9094d69799.png)

---

<div class="post-metadata">

**Author:** ![vkuehn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vkuehn/32/34805_2.png) [@vkuehn](https://discourse.nodered.org/u/vkuehn)\
**Post date:** [9 January 2021 15:33 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/69 "2021-01-09T15:33:43Z")

</div>

excellent thanks a lot !

---

<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:** [9 January 2021 16:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/70 "2021-01-09T16:55:10Z")

</div>

> [@vkuehn](#):
>
> btw how do you do these funny videos ?

See [here](https://discourse.nodered.org/t/node-config-screen-show-details-of-a-table-row/11958/17), and you can find other software that others use in the same discussion...

---

<div class="post-metadata">

**Author:** ![vkuehn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vkuehn/32/34805_2.png) [@vkuehn](https://discourse.nodered.org/u/vkuehn)\
**Post date:** [10 January 2021 11:10 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/71 "2021-01-10T11:10:12Z")

</div>

thanks for that and for sharing these screen casts.

---

<div class="post-metadata">

**Author:** ![Miliano](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@Miliano](https://discourse.nodered.org/u/Miliano)\
**Post date:** [10 February 2021 17:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/72 "2021-02-10T17:23:41Z")

</div>

I think, I´m to stupid! ☹

I tried it with the example:  
[https://dummyimage.com/600x400/000/fff](https://dummyimage.com/600x400/000/fff)

If I open this in the browser, the 600x400 area is mutch bigger, than if i open it with the example flow above.

An if I try to make it bigger by putting the percent to 200% then only a part of the graphic is shown.

Same with a own graphic ... very small. and if i edited it, with the editor, only a part is shown!?

Isn´t there an easy way, to get a grafic as Backgroung in a "normal" size?

PS. I try to set a privat graphic by this tuturial

> **[bartbutenaers/node-red-contrib-ui-svg](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Add-an-image-to-an-SVG-drawing)**
>
> Add-an-image-to-an-SVG-drawing

And it doesn´t work at all. Image isn´t shown.  
Is there a way to see the error massages why this happen? Any log or debug?

I try it again and again, but I don´t understand it ... I change something in the editor ... and in the dashboard it looks totaly different!?!?

---

<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:** [10 February 2021 19:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/73 "2021-02-10T19:55:11Z")

</div>

> [@Miliano](#):
>
> If I open this in the browser, the 600x400 area is mutch bigger, than if i open it with the example flow above.

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

> [@Miliano](#):
>
> An if I try to make it bigger by putting the percent to 200% then only a part of the graphic is shown.

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7bc713139d6050c988f6a17428373f1c2f9d5995.jpeg)

> [@Miliano](#):
>
> Same with a own graphic ... very small. and if i edited it, with the editor, only a part is shown!?

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.

> [@Miliano](#):
>
> Isn´t there an easy way, to get a grafic as Backgroung in a "normal" size?

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%):

```auto
<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).

> [@Miliano](#):
>
> it doesn´t work at all. Image isn´t shown.

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

> [@Miliano](#):
>
> Is there a way to see the error massages why this happen? Any log or debug?

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

> [@Miliano](#):
>
> I change something in the editor ... and in the dashboard it looks totaly different!?!?

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 😉

---

<div class="post-metadata">

**Author:** ![Miliano](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@Miliano](https://discourse.nodered.org/u/Miliano)\
**Post date:** [10 February 2021 20:16 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/74 "2021-02-10T20:16:48Z")

</div>

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

I copy this from above:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/655dee2067103c44adda62ff805f50f99d01aac6.png)

At Dashboard:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2f1e19fa40fcbf9ac818233cb72a87c578fffa85.png)

If I change the area:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c2eb881e12458dc513374afb6d859eb943efb832.png)

Then at Dashboard:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f0e8b5f65372d004ef3735676e5d2630ebb5cda8.png)

And if I try the Editor:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/a/eaf721495386f6d9533b2da2c82e3c7f1414de8f.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/3/d3a07dcf3a2f24a1adf829ac7e8b440a785c8b91.png)

In Dashboard:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/3/a3f0e92b6ef19c86e18c8cdfe914cf8855000871.png)

Hope this is better 😃  
Thanks for your help!

---

<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:** [10 February 2021 21:03 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/75 "2021-02-10T21:03:00Z")

</div>

> [@Miliano](#):
>
> Hope this is better 😃

You have no idea... 👍

> [@Miliano](#):
>
> Then at Dashboard:
> 
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f0e8b5f65372d004ef3735676e5d2630ebb5cda8.png)

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](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/master/svg_graphics.js#L193):

```auto
<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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/3/13c472c41436b1f2e1599275dbd8fff54219432a.png)

Then it is indeed solved:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/9/19b9ba66f25ea7284a8a38468874adc0717d28cd.png)

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 🙄

---

<div class="post-metadata">

**Author:** ![Miliano](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@Miliano](https://discourse.nodered.org/u/Miliano)\
**Post date:** [10 February 2021 21:14 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/76 "2021-02-10T21:14:26Z")

</div>

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

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

---

<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:** [10 February 2021 21:18 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/77 "2021-02-10T21:18:52Z")

</div>

> [@Miliano](#):
>
> always the same

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

---

<div class="post-metadata">

**Author:** ![Miliano](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@Miliano](https://discourse.nodered.org/u/Miliano)\
**Post date:** [10 February 2021 21:31 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/78 "2021-02-10T21:31:58Z")

</div>

Okay, I wait for this. No stress please! Thanks for all the work! 🙂  
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!? 😃

---

<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:** [10 February 2021 21:39 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/79 "2021-02-10T21:39:03Z")

</div>

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:

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

```

---

<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:** [10 February 2021 22:11 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/80 "2021-02-10T22:11:18Z")

</div>

> [@Miliano](#):
>
> And they don´t dare to ask!?

No the problem is that it works fine for them ...  
If you look e.g. at [this](https://discourse.nodered.org/t/text-update-not-work-for-me-with-svg-grafics-node/24033) dashboard from another user.  
I simply cannot explain that it fitted the entire area nicely 🤯

Although when I look at his SVG [source](https://discourse.nodered.org/t/text-update-not-work-for-me-with-svg-grafics-node/24033/5):

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

```

I assume that the width and height of the viewbox force the browser to fill the available area anyway (see [stackoverflow](https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container)).

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

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

---

<div class="post-metadata">

**Author:** ![Miliano](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@Miliano](https://discourse.nodered.org/u/Miliano)\
**Post date:** [11 February 2021 16:31 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/81 "2021-02-11T16:31:22Z")

</div>

Hello again 🙂  
I have install it, from your lokal copy.  
Now your example works "normal" 😃

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/86677a402b07097b157d313373fa1b218716a152.png)

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/914fa7c7f0e8651b0c9cdbd4b53ab2bbef2c3731.png)  
Save it  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cfdc00121732a31618fc1194c1dc15143014228d.png)  
And on the Dashboard:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/1/710e3f5d2e0a378eaa9071de13c041a7b70c08f0.png)

Still the same ..

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/2/e22ac661edd9ee82179cf2f6e57ffc3daad5acd3.png)  
Then it gets bigger:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/7/b7fd30d9af90eb3ec844cdb2e988c8ef6341c29e.png)  
But still cut off!?

Help Please! 😃

PS. Okay, I helped myself! 🙂  
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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 February 2021 16:44 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/82 "2021-02-11T16:44:58Z")

</div>

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

> **[How to Scale SVG | CSS-Tricks](https://css-tricks.com/scale-svg/)**
>
> The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of SVG Essentials and author of the

---

<div class="post-metadata">

**Author:** ![Miliano](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@Miliano](https://discourse.nodered.org/u/Miliano)\
**Post date:** [11 February 2021 16:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/83 "2021-02-11T16:55:24Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/e/bedb7f245ce41a96c7a1ab869213a1f9456d7947.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/8/88f2561341435848d9106346edbed659bc646c8c.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4c55265655102b0d1ea77e1ab42aa5f37d0daf81.png)

Help myself again 😃  
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 😃  
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!

[Previous page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063.md?page=3)

[Next page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063.md?page=5)