# Ui\_svg\_graphics

**URL:** <https://discourse.nodered.org/t/ui-svg-graphics/26676>\
**Category:** Dashboard\
**Created:** [14 May 2020 23:06 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676 "2020-05-14T23:06:15Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![971JMD](https://avatars.discourse-cdn.com/v4/letter/9/b77776/32.png) [@971JMD](https://discourse.nodered.org/u/971JMD)\
**Post date:** [14 May 2020 23:06 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/1 "2020-05-14T23:06:15Z")

</div>

Hello

I want to know if the ui\_svg\_graphics node is still working?

---

<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:** [14 May 2020 23:10 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/2 "2020-05-14T23:10:39Z")

</div>

Which node is that?

Please provide a link or screenshot.

---

<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:** [15 May 2020 20:05 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/3 "2020-05-15T20:05:52Z")

</div>

Hi @971JMD,  
Assuming you mean _node-red-contrib-ui-svg_, I'm rather curious why you assume it is not working anymore?

---

<div class="post-metadata">

**Author:** ![971JMD](https://avatars.discourse-cdn.com/v4/letter/9/b77776/32.png) [@971JMD](https://discourse.nodered.org/u/971JMD)\
**Post date:** [15 May 2020 23:43 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/4 "2020-05-15T23:43:34Z")

</div>

heloo

unable to add imag

 ![svg1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/0528268b880d32ffa118d9109addaf90e2bf63fd.jpeg)

![svg2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/496399223e7ce8d6e0ff3578320790a672425325.jpeg)

---

<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:** [15 May 2020 23:53 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/5 "2020-05-15T23:53:50Z")

</div>

That button doesn't add an image.

If you mean SVG then paste the SVG into the SVG source box.

If you mean an image like a jpg, then look elsewhere in the editor (I can't remember where exactly are the moment)

---

<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:** [16 May 2020 05:49 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/6 "2020-05-16T05:49:03Z")

</div>

Morning Jean-Michel,

Thanks for the screenshot, but can you please give us some more information about what you want to try to do. Because now we have to spend our time on guessing ...

Suppose you want to add a background image (e.g. of your house), so an jpg or png image. I 'think' the best way to do that is like another user described [here](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/35#issuecomment-602164293). Summarized:

1. Create a directory e.g. `/home/pi/public_images/` (on linux).
2. Copy your background picture to that directory.
3. Set the `httpStatic` parameter in your settings file to `httpStatic: '/home/pi/public_images/,`
4. Restart Node-RED. In the startup logs it should display your directory `[info] HTTP Static : /home/pi/public_images/`
5. Add this - via the _"Source"_ tabsheet of our node's config screen - as first element in your SVG  
`<image width="1704px" height="695" id="background" xlink:href="/SVG.png" />`  
P.S. I'm not sure at the moment what width and height you need.

Caution: this image cannot be displayed correctly in the DrawSvg editor (which you open via the blue button on our config node's screen), because the DrawSvg cloud service has no access to that local folder!

I will contact the developer of DrawSvg whether he can offer us a solution for this!  
Bart

---

<div class="post-metadata">

**Author:** ![971JMD](https://avatars.discourse-cdn.com/v4/letter/9/b77776/32.png) [@971JMD](https://discourse.nodered.org/u/971JMD)\
**Post date:** [16 May 2020 17:12 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/7 "2020-05-16T17:12:56Z")

</div>

salut

je souhait intégré une image et rajouter des informations venant de plusieurs capteurs  
sous raspberry 3 et node Red

I want to integrate an image and add information coming from several sensors  
under raspbeery 3 and Node RED

![cap3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f8f356bafdfd5daf893aa783811b2fe5282d3429.jpeg)

---

<div class="post-metadata">

**Author:** ![971JMD](https://avatars.discourse-cdn.com/v4/letter/9/b77776/32.png) [@971JMD](https://discourse.nodered.org/u/971JMD)\
**Post date:** [20 May 2020 15:14 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/8 "2020-05-20T15:14:25Z")

</div>

Hello, no idea

---

<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:** [20 May 2020 17:47 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/9 "2020-05-20T17:47:44Z")

</div>

Have you tried all the steps that I have described ( to load the background image ) and that did not work? Or is there anything else that fails?

---

<div class="post-metadata">

**Author:** ![971JMD](https://avatars.discourse-cdn.com/v4/letter/9/b77776/32.png) [@971JMD](https://discourse.nodered.org/u/971JMD)\
**Post date:** [21 May 2020 15:11 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/10 "2020-05-21T15:11:34Z")

</div>

Hello

I can not  
 ![c1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/7/27149dfdf3d3219683ccf1b42b71f91e275b28e5.jpeg)

---

<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:** [21 May 2020 15:29 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/11 "2020-05-21T15:29:20Z")

</div>

Convert your image to base64 using any of the online image to base64 convertors.

Copy the data URL and paste it into an img src in the SVG source.

See this...

> <https://stackoverflow.com/questions/6249664/does-svg-support-embedding-of-bitmap-images>

---

<div class="post-metadata">

**Author:** ![971JMD](https://avatars.discourse-cdn.com/v4/letter/9/b77776/32.png) [@971JMD](https://discourse.nodered.org/u/971JMD)\
**Post date:** [21 May 2020 15:55 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/12 "2020-05-21T15:55:49Z")

</div>

avec ça: [https://www.base64-image.de/](https://www.base64-image.de/)

---

<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:** [21 May 2020 16:06 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/13 "2020-05-21T16:06:50Z")

</div>

> [@971JMD](#):
>
> avec ça: [https://www.base64-image.de](https://www.base64-image.de/)

oui ça va le faire

---

<div class="post-metadata">

**Author:** ![971JMD](https://avatars.discourse-cdn.com/v4/letter/9/b77776/32.png) [@971JMD](https://discourse.nodered.org/u/971JMD)\
**Post date:** [21 May 2020 16:37 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/14 "2020-05-21T16:37:36Z")

</div>

et non

![c2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/8/48e7ddca04bb5ee13f33a79f55586477b53c796a.jpeg)

---

<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:** [21 May 2020 19:43 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/15 "2020-05-21T19:43:57Z")

</div>

> [@971JMD](#):
>
> ![cap3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f8f356bafdfd5daf893aa783811b2fe5282d3429.jpeg)

@971JMD is this ⬆ the image you want to have in SVG?

As SVG is "scalable vectors" it would be much better to just draw it. It is not a complicated drawing!

That saidm if you must use an image, it does work as i said in my previous post..

- convert your image to base64 data (try to keep it small \< 20KB if possible)
  - copy the image data `data:image/jpeg;base64, LzlqLzRBQ...PoSk....etc...etc` data

- add a new image element to the SVG Source
  - `<image href="data:image/jpeg;base64, LzlqLzRBQ...PoSk....etc...etc" height="200" width="200"/>`

so it looks something like this...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/a/2ac64b70229ced53f7fe49d8ee72c56bf6d2ca7a.png)

WARNING: Images are MUCH bigger than SVG and images look terrible because they do not "scale" like vector drawings. I would **strongly recommend** drawing these simple graphics in SVG (use inkscape if necessary)

---

<div class="post-metadata">

**Author:** ![971JMD](https://avatars.discourse-cdn.com/v4/letter/9/b77776/32.png) [@971JMD](https://discourse.nodered.org/u/971JMD)\
**Post date:** [21 May 2020 21:04 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/16 "2020-05-21T21:04:44Z")

</div>

![cap03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/0/60e3bfcea146e9439890f1934c732dbc0a2001ba.jpeg)

après je fais quoi

---

<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:** [21 May 2020 21:40 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/17 "2020-05-21T21:40:13Z")

</div>

Drag an image or click the button. It will convert to base64 string.

Then copy it & do what I said in the previous post.

---

<div class="post-metadata">

**Author:** ![971JMD](https://avatars.discourse-cdn.com/v4/letter/9/b77776/32.png) [@971JMD](https://discourse.nodered.org/u/971JMD)\
**Post date:** [22 May 2020 12:47 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/18 "2020-05-22T12:47:13Z")

</div>

je clic sur **show code** ou **copy image** ou **copy css**

---

<div class="post-metadata">

**Author:** ![971JMD](https://avatars.discourse-cdn.com/v4/letter/9/b77776/32.png) [@971JMD](https://discourse.nodered.org/u/971JMD)\
**Post date:** [22 May 2020 18:45 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/19 "2020-05-22T18:45:03Z")

</div>

Enfin 😅

Ça fonctionne, une erreur de copier colée

---

<div class="post-metadata">

**Author:** ![971JMD](https://avatars.discourse-cdn.com/v4/letter/9/b77776/32.png) [@971JMD](https://discourse.nodered.org/u/971JMD)\
**Post date:** [22 May 2020 19:18 UTC](https://discourse.nodered.org/t/ui-svg-graphics/26676/20 "2020-05-22T19:18:36Z")

</div>

Maitenant je souhaiterai affichée un valeur venan de mon serveur FIBARO.

Now I would like to display a value from my FIBARO server.

 ![cap08](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/8/e809f16a2fe20fd6bd1c06f69956e17425f8af62.jpeg)

[flows (3).json](https://discourse.nodered.org/uploads/short-url/xVcJr03fGwtdMMFuibS0hgF4Nqt.json) (82.3 KB)

[Next page](https://discourse.nodered.org/t/ui-svg-graphics/26676.md?page=2)