# SVG trigger the specified LED ON

**URL:** <https://discourse.nodered.org/t/svg-trigger-the-specified-led-on/92546>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [21 October 2024 11:59 UTC](https://discourse.nodered.org/t/svg-trigger-the-specified-led-on/92546 "2024-10-21T11:59:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![king](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/king/32/61915_2.png) [@king](https://discourse.nodered.org/u/king)\
**Post date:** [21 October 2024 11:59 UTC](https://discourse.nodered.org/t/svg-trigger-the-specified-led-on/92546/1 "2024-10-21T11:59:49Z")

</div>

Sorry~ Because I'm new to SVG I would like to ask how to trigger the specified LED ON in the background image  
[flows (1).json](https://discourse.nodered.org/uploads/short-url/yUcxjT8vbJ43XD31ddno71omPif.json) (149.0 KB)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [21 October 2024 12:36 UTC](https://discourse.nodered.org/t/svg-trigger-the-specified-led-on/92546/2 "2024-10-21T12:36:08Z")

</div>

I doubt if many people will want to download and install a 150kB flow file.

Might be a good idea to post a screen capture showing your dashboard and the LED you want to turn on.

---

<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:** [21 October 2024 19:55 UTC](https://discourse.nodered.org/t/svg-trigger-the-specified-led-on/92546/3 "2024-10-21T19:55:12Z")

</div>

> [@jbudd](#):
>
> I doubt if many people will want to download and install a 150kB flow file

Yes indeed quite a large flow file. But it is in fact a very small flow, but it contains a base64 encoded image to show inside an svg drawing:

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

> [@king](#):
>
> Because I'm new to SVG I would like to ask how to trigger the specified LED ON in the background image

Hi @king,  
I think you are mixing up things.

- _ **Pixel-oriented:** _ You use an svg drawing to show a single image, and you have drawn (manually via some Paint tool) your LED's inside your png image:

- _ **Vector-oriented:** _ Since SVG means "Scalable Vector Graphics"\*, what you should do is:

Then you can show/hide the circle elements using input messages:

![show-hide-leds](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a211d3301320cde87934f78043d1ff9c56a98d2b.gif)

[flow-show-hide.json](https://discourse.nodered.org/uploads/short-url/kMHkz0DXKLzzOn3DveJY9QMsbwx.json) (64.7 KB)

I have done my best to explain you the basics of the basics above. However now it is up to you. The internet is full of tutorials and videos about the basics of SVG. And the readme page and wiki pages of my svg-node are full of information about how to show and manipulate svg drawings in Node-RED.

Good luck!  
Bart

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 November 2024 19:55 UTC](https://discourse.nodered.org/t/svg-trigger-the-specified-led-on/92546/4 "2024-11-20T19:55:56Z")

</div>

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