# Help with my images SVG please

**URL:** <https://discourse.nodered.org/t/help-with-my-images-svg-please/52102>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, weather, lighting\
**Created:** [11 October 2021 18:30 UTC](https://discourse.nodered.org/t/help-with-my-images-svg-please/52102 "2021-10-11T18:30:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![RicardoCotrina](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ricardocotrina/32/44142_2.png) [@RicardoCotrina](https://discourse.nodered.org/u/RicardoCotrina)\
**Post date:** [11 October 2021 18:30 UTC](https://discourse.nodered.org/t/help-with-my-images-svg-please/52102/1 "2021-10-11T18:30:49Z")

</div>

I'm using some SVG image templates, and I have 2 that I wish would show up. One on top of the other and vice versa when you click. That is to say, that the images alternate.  
Thank you, I will be aware of your comments.

I am using the node "ui\_svg\_graphics"...

I am attaching a screenshot of the SVG images that I want to be superimposed when I click. Greetings.

![WhatsApp Image 2021-10-11 at 1.25.02 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/74509c39533815e993f350511771d06f04c97c21.jpeg)

My flow is:

```auto
[
    {
        "id": "d8d3fa0bf37b7f47",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "fbe55564f0fe0f3f",
        "type": "ui_svg_graphics",
        "z": "d8d3fa0bf37b7f47",
        "group": "5286eab45a5fb268",
        "order": 4,
        "width": 7,
        "height": 2,
        "svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" xml:space=\"preserve\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\"/><defs id=\"svgEditorDefs\"><style type=\"text/css\">#state_switch{fill:black;font-family:Georgia;font-size:12.999988084915614px;}\n</style></defs><desc>Copyright Opto 22</desc> <svg viewBox=\"0 0 100 100\" id=\"switch_off\"><g id=\"switch_on\">\n\t<g id=\"shape\">\n\t\t<rect x=\"1\" y=\"20.664\" fill=\"#009cff\" width=\"98\" height=\"58.173\"/>\n\t</g>\n\t<g id=\"shadow\">\n\t\t<rect x=\"5.092\" y=\"24.892\" fill=\"#003e66\" width=\"89.816\" height=\"49.716\"/>\n\t\t<polygon opacity=\"0.5\" fill=\"#003e66\" enable-background=\"new \" points=\"94.908,74.608 5.092,74.608 1,78.836 99,78.836 \"/>\n\t</g>\n\t<g id=\"dark\">\n\t\t<polygon fill=\"#0071ba\" points=\"79.564,22.3 79.564,70.811 48.875,72.835 48.875,26.188 \"/>\n\t\t<polygon fill=\"#0071ba\" points=\"79.564,70.811 91.839,72.835 91.839,26.188 79.564,22.3 \"/>\n\t</g>\n\t<g id=\"light\">\n\t\t<rect x=\"7.956\" y=\"26.188\" fill=\"#3bbeff\" stroke=\"#000000\" stroke-miterlimit=\"10\" width=\"40.919\" height=\"46.647\"/>\n\t</g>\n\t<g id=\"hlight\">\n\t\t<path fill=\"#a3daff\" d=\"M79.473,70.311h-1V23.367L49.146,27.09l-0.126,-0.992l29.89,-3.794c0.143,-0.016,0.285,0.026,0.393,0.121c0.108,0.095,0.17,0.231,0.17,0.375V70.311Z\"/>\n\t\t\n\t\t\t<rect x=\"63.675\" y=\"56.192\" transform=\"matrix(0.0646 0.9979 -0.9979 0.0646 130.9192 2.8788)\" fill=\"#a3daff\" width=\"0.499\" height=\"30.159\"/>\n\t\t<rect x=\"46.374\" y=\"29.461\" fill=\"#a3daff\" width=\"0.5\" height=\"39.282\"/>\n\t\t<rect x=\"10.161\" y=\"29.461\" fill=\"#a3daff\" width=\"0.5\" height=\"39.282\"/>\n\t\t<rect x=\"12.866\" y=\"70.13\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\"/>\n\t\t<rect x=\"12.866\" y=\"28.393\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\"/>\n\t</g>\n</g></svg><text x=\"35.6782\" y=\"16.4152\" id=\"state_switch\"/></svg>",
        "clickableShapes": [
            {
                "targetId": "#switch_off",
                "action": "click",
                "payload": "#switch_off",
                "payloadType": "str",
                "topic": "#switch_off"
            }
        ],
        "javascriptHandlers": [
            {
                "selector": "#switch_off",
                "action": "click",
                "sourceCode": "msg.payload = \"Hola\""
            }
        ],
        "smilAnimations": [],
        "bindings": [],
        "showCoordinates": false,
        "autoFormatAfterEdit": false,
        "showBrowserErrors": false,
        "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": "SWITCH - OFF",
        "x": 1780,
        "y": 260,
        "wires": [
            [
                "6a67957aef1cfa39"
            ]
        ]
    },
    {
        "id": "e57f20f5f3bae2db",
        "type": "ui_svg_graphics",
        "z": "d8d3fa0bf37b7f47",
        "group": "5286eab45a5fb268",
        "order": 6,
        "width": 7,
        "height": 2,
        "svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" xml:space=\"preserve\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\"/><desc>Copyright Opto 22</desc> <svg viewBox=\"0 0 100 100\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" id=\"switch_on\"><g>\n\t<g id=\"shape\">\n\t\t<rect x=\"1\" y=\"20.664\" fill=\"#009cff\" width=\"98\" height=\"58.173\"/>\n\t</g>\n\t<g id=\"shadow\">\n\t\t<rect x=\"5.092\" y=\"24.892\" fill=\"#003e66\" width=\"89.816\" height=\"49.716\"/>\n\t\t<polygon opacity=\"0.5\" fill=\"#003e66\" enable-background=\"new \" points=\"94.908,74.608 5.092,74.608 1,78.836 99,78.836 \"/>\n\t</g>\n\t<g id=\"dark\">\n\t\t<polygon fill=\"#0071ba\" points=\"20.436,71.13 20.436,21.209 51.125,26.529 51.125,73.176 \"/>\n\t\t<polygon fill=\"#0071ba\" points=\"20.436,21.209 8.161,26.529 8.161,73.176 20.436,71.13 \"/>\n\t</g>\n\t<g id=\"light\">\n\t\t<rect x=\"51.125\" y=\"26.529\" fill=\"#3bbeff\" stroke=\"#000000\" stroke-miterlimit=\"10\" width=\"40.919\" height=\"46.647\"/>\n\t</g>\n\t<g id=\"hlight\">\n\t\t<polygon fill=\"#a3daff\" points=\"20.118,70.107 19.118,70.107 19.118,22.873 8.957,27.496 8.543,26.586 20.118,21.319 \"/>\n\t\t\n\t\t\t<rect x=\"14.264\" y=\"66.284\" transform=\"matrix(0.1638 0.9865 -0.9865 0.1638 82.6304 45.4365)\" fill=\"#a3daff\" width=\"0.501\" height=\"10.348\"/>\n\t\t<rect x=\"53.126\" y=\"30.621\" fill=\"#a3daff\" width=\"0.5\" height=\"39.281\"/>\n\t\t<rect x=\"89.339\" y=\"30.621\" fill=\"#a3daff\" width=\"0.5\" height=\"39.281\"/>\n\t\t<rect x=\"55.831\" y=\"28.734\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\"/>\n\t\t<rect x=\"55.831\" y=\"70.471\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\"/>\n\t</g>\n</g></svg></svg>",
        "clickableShapes": [
            {
                "targetId": "#switch_on",
                "action": "click",
                "payload": "#switch_on",
                "payloadType": "str",
                "topic": "#switch_on"
            }
        ],
        "javascriptHandlers": [],
        "smilAnimations": [],
        "bindings": [],
        "showCoordinates": false,
        "autoFormatAfterEdit": false,
        "showBrowserErrors": false,
        "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": "Switch - ON",
        "x": 1770,
        "y": 300,
        "wires": [
            [
                "7f295b98ceec6e7d"
            ]
        ]
    },
    {
        "id": "6a67957aef1cfa39",
        "type": "debug",
        "z": "d8d3fa0bf37b7f47",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 2250,
        "y": 260,
        "wires": []
    },
    {
        "id": "7f295b98ceec6e7d",
        "type": "debug",
        "z": "d8d3fa0bf37b7f47",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 2250,
        "y": 300,
        "wires": []
    },
    {
        "id": "5286eab45a5fb268",
        "type": "ui_group",
        "name": "Bomba",
        "tab": "8bbab1b47b8e87c8",
        "order": 1,
        "disp": true,
        "width": 14,
        "collapse": false
    },
    {
        "id": "8bbab1b47b8e87c8",
        "type": "ui_tab",
        "name": "SVG",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<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:** [11 October 2021 19:47 UTC](https://discourse.nodered.org/t/help-with-my-images-svg-please/52102/2 "2021-10-11T19:47:55Z")

</div>

Hi @RicardoCotrina,

There are multiple ways to implement something like that. I wrote a [tutorial](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Managing-multiple-floors) some time ago to manage multiple floors in a house. Although a floor is completely different from a toghle button, it might give you some inspiration:

- Replace the entire svg by another one.
- Create two groups on top of each other, and only display one

Bart

---

<div class="post-metadata">

**Author:** ![RicardoCotrina](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ricardocotrina/32/44142_2.png) [@RicardoCotrina](https://discourse.nodered.org/u/RicardoCotrina)\
**Post date:** [12 October 2021 02:08 UTC](https://discourse.nodered.org/t/help-with-my-images-svg-please/52102/3 "2021-10-12T02:08:34Z")

</div>

I have not had any success, with the template you presented it does not allow me to use the SVG images. I have the images on my PC, is there a way to extract them?

---

<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:** [12 October 2021 20:37 UTC](https://discourse.nodered.org/t/help-with-my-images-svg-please/52102/4 "2021-10-12T20:37:12Z")

</div>

Evening Ricardo,

I have updated your flow, as you can see below.  
Will explain what I have changed, so you (and others) can learn from it:

1. You had two separate SVG nodes, one for switch ON and one for switch off. I have used only one SVG node. That makes it much easier to only show one of both switch drawings.

2. Your SVG drawings contained an embedded svg tag:

3. Now we have a single SVG drawing containing two separate group tags. One group for the switch ON shapes, and one group for the switch OFF shapes:

4. Your two separate SVG drawings contained similar id's for the subgroups (e.g. both drawings had an element with id _"shadow"_). When we merge both drawings into a single SVG drawing, we would end up with two elements having the same id. Therefore I have renamed those elements (with postfix _"\_off"_ or _"\_on"_), for example:

5. Now we only have to set the [visibility](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility) (style) attribute of those groups (with id _"switch\_\_on"_ or _"switch\_off"_) to _"visible"_ or _"hidden"_. Which means that only one of the two groups will be displayed, so only one of your two SVG drawings will be displayed.

6. By default I set the _"switch\_on"_ group hidden, so the switch will be OFF by default:

7. Only when the _"dark"_ area of the switch is clicked, you want to get an output message to be send. Only on this area of the switch the mouse cursor will get a 'hand' shape:

8. As soon as the button is clicked with the mouse, you want to see it changing shape visually. Which means you have to toggle the visibility of both groups.

Below you can find the complete example flow. Note that both Inject nodes are optional. I only added them to demonstrate how you could inject a message to change the state:

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

```auto
[{"id":"46e1a56491a6574c","type":"ui_svg_graphics","z":"dd961d75822d1f62","group":"5286eab45a5fb268","order":6,"width":7,"height":2,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" xml:space=\"preserve\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\" />\n <desc>Copyright Opto 22</desc>\n <defs id=\"svgEditorDefs\">\n <style type=\"text/css\">\n #state_switch{fill:black;font-family:Georgia;font-size:12.999988084915614px;}\n </style>\n </defs>\n <g id=\"switch_off\">\n <g id=\"shape_off\">\n <rect x=\"1\" y=\"20.664\" fill=\"#009cff\" width=\"98\" height=\"58.173\" />\n </g>\n <g id=\"shadow_off\">\n <rect x=\"5.092\" y=\"24.892\" fill=\"#003e66\" width=\"89.816\" height=\"49.716\" />\n <polygon opacity=\"0.5\" fill=\"#003e66\" enable-background=\"new \" points=\"94.908,74.608 5.092,74.608 1,78.836 99,78.836 \" />\n </g>\n <g id=\"dark_off\">\n <polygon fill=\"#0071ba\" points=\"79.564,22.3 79.564,70.811 48.875,72.835 48.875,26.188 \" />\n <polygon fill=\"#0071ba\" points=\"79.564,70.811 91.839,72.835 91.839,26.188 79.564,22.3 \" />\n </g>\n <g id=\"light_off\">\n <rect x=\"7.956\" y=\"26.188\" fill=\"#3bbeff\" stroke=\"#000000\" stroke-miterlimit=\"10\" width=\"40.919\" height=\"46.647\" />\n </g>\n <g id=\"hlight_off\">\n <path fill=\"#a3daff\" d=\"M79.473,70.311h-1V23.367L49.146,27.09l-0.126,-0.992l29.89,-3.794c0.143,-0.016,0.285,0.026,0.393,0.121c0.108,0.095,0.17,0.231,0.17,0.375V70.311Z\" />\n <rect x=\"63.675\" y=\"56.192\" transform=\"matrix(0.0646 0.9979 -0.9979 0.0646 130.9192 2.8788)\" fill=\"#a3daff\" width=\"0.499\" height=\"30.159\" />\n <rect x=\"46.374\" y=\"29.461\" fill=\"#a3daff\" width=\"0.5\" height=\"39.282\" />\n <rect x=\"10.161\" y=\"29.461\" fill=\"#a3daff\" width=\"0.5\" height=\"39.282\" />\n <rect x=\"12.866\" y=\"70.13\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\" />\n <rect x=\"12.866\" y=\"28.393\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\" />\n </g>\n </g>\n <g id=\"switch_on\" visibility=\"hidden\">\n <g id=\"shape_on\">\n <rect x=\"1\" y=\"20.664\" fill=\"#009cff\" width=\"98\" height=\"58.173\" />\n </g>\n <g id=\"shadow_on\">\n <rect x=\"5.092\" y=\"24.892\" fill=\"#003e66\" width=\"89.816\" height=\"49.716\" />\n <polygon opacity=\"0.5\" fill=\"#003e66\" enable-background=\"new \" points=\"94.908,74.608 5.092,74.608 1,78.836 99,78.836 \" />\n </g>\n <g id=\"dark_on\">\n <polygon fill=\"#0071ba\" points=\"20.436,71.13 20.436,21.209 51.125,26.529 51.125,73.176 \" />\n <polygon fill=\"#0071ba\" points=\"20.436,21.209 8.161,26.529 8.161,73.176 20.436,71.13 \" />\n </g>\n <g id=\"light_on\">\n <rect x=\"51.125\" y=\"26.529\" fill=\"#3bbeff\" stroke=\"#000000\" stroke-miterlimit=\"10\" width=\"40.919\" height=\"46.647\" />\n </g>\n <g id=\"hlight_on\">\n <polygon fill=\"#a3daff\" points=\"20.118,70.107 19.118,70.107 19.118,22.873 8.957,27.496 8.543,26.586 20.118,21.319 \" />\n <rect x=\"14.264\" y=\"66.284\" transform=\"matrix(0.1638 0.9865 -0.9865 0.1638 82.6304 45.4365)\" fill=\"#a3daff\" width=\"0.501\" height=\"10.348\" />\n <rect x=\"53.126\" y=\"30.621\" fill=\"#a3daff\" width=\"0.5\" height=\"39.281\" />\n <rect x=\"89.339\" y=\"30.621\" fill=\"#a3daff\" width=\"0.5\" height=\"39.281\" />\n <rect x=\"55.831\" y=\"28.734\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\" />\n <rect x=\"55.831\" y=\"70.471\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\" />\n </g>\n </g>\n <text x=\"35.6782\" y=\"16.4152\" id=\"state_switch\" />\n</svg>","clickableShapes":[{"targetId":"#dark_on","action":"click","payload":"Switch on","payloadType":"str","topic":"SWITCH_ON"},{"targetId":"#dark_off","action":"click","payload":"Switch off","payloadType":"str","topic":"SWITCH_OFF"}],"javascriptHandlers":[{"selector":"#dark_on","action":"click","sourceCode":"document.getElementById(\"switch_on\").style.visibility = \"hidden\";\ndocument.getElementById(\"switch_off\").style.visibility = \"visible\";"},{"selector":"#dark_off","action":"click","sourceCode":"document.getElementById(\"switch_on\").style.visibility = \"visible\";\ndocument.getElementById(\"switch_off\").style.visibility = \"hidden\";"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":true,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"name":"ON/OFF switch","x":1800,"y":160,"wires":[["fe79529085bc6afe"]]},{"id":"fe79529085bc6afe","type":"debug","z":"dd961d75822d1f62","name":"Switch state","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1990,"y":160,"wires":[]},{"id":"13804813e4463aad","type":"inject","z":"dd961d75822d1f62","name":"Switch off","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"command\":\"update_style\",\"selector\":\"#switch_off\",\"attributeName\":\"visibility\",\"attributeValue\":\"visible\"},{\"command\":\"update_style\",\"selector\":\"#switch_on\",\"attributeName\":\"visibility\",\"attributeValue\":\"hidden\"}]","payloadType":"json","x":1600,"y":160,"wires":[["46e1a56491a6574c"]]},{"id":"d7c277cef617a78a","type":"inject","z":"dd961d75822d1f62","name":"Switch on","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"command\":\"update_style\",\"selector\":\"#switch_off\",\"attributeName\":\"visibility\",\"attributeValue\":\"hidden\"},{\"command\":\"update_style\",\"selector\":\"#switch_on\",\"attributeName\":\"visibility\",\"attributeValue\":\"visible\"}]","payloadType":"json","x":1600,"y":220,"wires":[["46e1a56491a6574c"]]},{"id":"5286eab45a5fb268","type":"ui_group","name":"Bomba","tab":"8bbab1b47b8e87c8","order":1,"disp":true,"width":14,"collapse":false},{"id":"8bbab1b47b8e87c8","type":"ui_tab","name":"SVG","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

And here you can see the flow in action:

![demo_svg_switch](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cfdfac588a83853da40e506484a6c74232bac13b.gif)

**Caution:** I had to create a Js event bubble up _ **fix** _ for this, which is not available on NPM yet. So you will need to install the fixed node directly from my Github account (from within your .node-red folder):

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

```

Hope you can now continue from here on with this by yourself.  
Bart

---

<div class="post-metadata">

**Author:** ![RicardoCotrina](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ricardocotrina/32/44142_2.png) [@RicardoCotrina](https://discourse.nodered.org/u/RicardoCotrina)\
**Post date:** [13 October 2021 19:16 UTC](https://discourse.nodered.org/t/help-with-my-images-svg-please/52102/5 "2021-10-13T19:16:43Z")

</div>

Wow ty ! !

---

<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:** [27 October 2021 19:17 UTC](https://discourse.nodered.org/t/help-with-my-images-svg-please/52102/6 "2021-10-27T19:17:41Z")

</div>

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