# SVG: How to change image url with payload

**URL:** <https://discourse.nodered.org/t/svg-how-to-change-image-url-with-payload/68868>\
**Category:** General\
**Created:** [11 October 2022 14:18 UTC](https://discourse.nodered.org/t/svg-how-to-change-image-url-with-payload/68868 "2022-10-11T14:18:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kiki](https://avatars.discourse-cdn.com/v4/letter/k/dc4da7/32.png) [@kiki](https://discourse.nodered.org/u/kiki)\
**Post date:** [11 October 2022 14:18 UTC](https://discourse.nodered.org/t/svg-how-to-change-image-url-with-payload/68868/1 "2022-10-11T14:18:22Z")

</div>

Hi guys,

I want to change a SVG image inserted via URI

First I manually inserted an image in the SVG editor (svg-editor/elements/Image/Load image file).

The selected SVG document is then encoded in Base64 and inserted into the file.  
I now want to exchange the Base64 encoded text via the payload.

I think it is the same question as in this case ([link](https://discourse.nodered.org/t/svg-node-change-image/59480)), but the solution is not explained here. 😕

I am grateful for any help!

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

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

```auto
[
    {
        "id": "a89f237b52c25e02",
        "type": "file in",
        "z": "a12c90d1b9eca540",
        "name": "",
        "filename": "Z:/SVG-Bilder/forum/blue_square.svg",
        "filenameType": "str",
        "format": "utf8",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 390,
        "y": 1560,
        "wires": [
            [
                "50d555cec4e8e40b"
            ]
        ]
    },
    {
        "id": "9be092b39f3444f8",
        "type": "inject",
        "z": "a12c90d1b9eca540",
        "name": "square",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 150,
        "y": 1560,
        "wires": [
            [
                "a89f237b52c25e02"
            ]
        ]
    },
    {
        "id": "50d555cec4e8e40b",
        "type": "base64",
        "z": "a12c90d1b9eca540",
        "name": "",
        "action": "",
        "property": "payload",
        "x": 720,
        "y": 1560,
        "wires": [
            [
                "9031bd7ee6b7a72a"
            ]
        ]
    },
    {
        "id": "9031bd7ee6b7a72a",
        "type": "function",
        "z": "a12c90d1b9eca540",
        "name": "replace_picture_in_svg_block",
        "func": "var pictureBase64 = msg.payload;\n\nlet svg_code = \"data:image/svg+xml;base64,\" + pictureBase64;\n\nmsg.payload = { command: \"update_attribute\",\n elementId: \"e1_image\",\n selector: \"e1_image\",\n attributeName: \"xlink:href\",\n attributeValue: svg_code\n}\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 950,
        "y": 1560,
        "wires": [
            [
                "d98bfe586c907b77"
            ]
        ]
    },
    {
        "id": "5e53df8113abf61a",
        "type": "file in",
        "z": "a12c90d1b9eca540",
        "name": "",
        "filename": "Z:/SVG-Bilder/forum/red_circle.svg",
        "filenameType": "str",
        "format": "utf8",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 380,
        "y": 1620,
        "wires": [
            [
                "50d555cec4e8e40b"
            ]
        ]
    },
    {
        "id": "e7ad919a48a6ec40",
        "type": "inject",
        "z": "a12c90d1b9eca540",
        "name": "star",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 150,
        "y": 1620,
        "wires": [
            [
                "5e53df8113abf61a"
            ]
        ]
    },
    {
        "id": "eefe3142503c08a9",
        "type": "file in",
        "z": "a12c90d1b9eca540",
        "name": "",
        "filename": "Z:/SVG-Bilder/forum/yellow_star.svg",
        "filenameType": "str",
        "format": "utf8",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 390,
        "y": 1680,
        "wires": [
            [
                "50d555cec4e8e40b"
            ]
        ]
    },
    {
        "id": "30d83d52e5904087",
        "type": "inject",
        "z": "a12c90d1b9eca540",
        "name": "circle",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 150,
        "y": 1680,
        "wires": [
            [
                "eefe3142503c08a9"
            ]
        ]
    },
    {
        "id": "d98bfe586c907b77",
        "type": "ui_svg_graphics",
        "z": "a12c90d1b9eca540",
        "group": "2f833989e5035c59",
        "order": 1,
        "width": "32",
        "height": "16",
        "svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0\" y=\"0\" height=\"100\" viewBox=\"0 0 100 100\" width=\"100\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill: none; stroke: none;\"/>\n<!-- Add here your SVG shapes (circles, rectangles, ...) -->\n<!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).-->\n<image x=\"83.22237186401146\" y=\"31.890812898289198\" width=\"22.270306710809464\" height=\"31.4982\" id=\"e1_image\" preserveAspectRatio=\"xMidYMid meet\" xlink:href=\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9IjIxMG1tIgogICBoZWlnaHQ9IjI5N21tIgogICB2aWV3Qm94PSIwIDAgMjEwIDI5NyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnOCIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wLjItMiAoZTg2Yzg3MDg3OSwgMjAyMS0wMS0xNSkiCiAgIHNvZGlwb2RpOmRvY25hbWU9InJlZF9jaXJjbGUuc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMiIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9ImJhc2UiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6em9vbT0iMC4zNSIKICAgICBpbmtzY2FwZTpjeD0iNDAwIgogICAgIGlua3NjYXBlOmN5PSI1NjAiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9Im1tIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImxheWVyMSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC1yb3RhdGlvbj0iMCIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMTciCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjE5MTIiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjYxIgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iRWJlbmUgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiPgogICAgPGVsbGlwc2UKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLXdpZHRoOjAuMjY0NTgzIgogICAgICAgaWQ9InBhdGgxMiIKICAgICAgIGN4PSIxMjkuNjQ1ODMiCiAgICAgICBjeT0iMTIzLjU5ODIxIgogICAgICAgcng9IjI5Ljg2MDExNyIKICAgICAgIHJ5PSIyNy41OTIyNiIgLz4KICA8L2c+Cjwvc3ZnPgo=\"/></svg>",
        "clickableShapes": [],
        "javascriptHandlers": [],
        "smilAnimations": [],
        "bindings": [],
        "showCoordinates": false,
        "autoFormatAfterEdit": false,
        "showBrowserErrors": false,
        "showBrowserEvents": false,
        "enableJsDebugging": false,
        "sendMsgWhenLoaded": false,
        "noClickWhenDblClick": false,
        "outputField": "payload",
        "editorUrl": "//drawsvg.org/drawsvg.html",
        "directory": "",
        "panning": "disabled",
        "zooming": "disabled",
        "panOnlyWhenZoomed": false,
        "doubleClickZoomEnabled": false,
        "mouseWheelZoomEnabled": false,
        "dblClickZoomPercentage": 150,
        "cssString": "div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit;\n}",
        "name": "",
        "x": 1220,
        "y": 1560,
        "wires": [
            []
        ]
    },
    {
        "id": "2f833989e5035c59",
        "type": "ui_group",
        "name": "test",
        "tab": "80f0e178.bbf4a",
        "order": 1,
        "disp": true,
        "width": "32",
        "collapse": false,
        "className": ""
    },
    {
        "id": "80f0e178.bbf4a",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<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 October 2022 14:27 UTC](https://discourse.nodered.org/t/svg-how-to-change-image-url-with-payload/68868/2 "2022-10-11T14:27:36Z")

</div>

Try putting a `#` at the beginning of the selector value.

---

<div class="post-metadata">

**Author:** ![kiki](https://avatars.discourse-cdn.com/v4/letter/k/dc4da7/32.png) [@kiki](https://discourse.nodered.org/u/kiki)\
**Post date:** [12 October 2022 05:45 UTC](https://discourse.nodered.org/t/svg-how-to-change-image-url-with-payload/68868/3 "2022-10-12T05:45:41Z")

</div>

Thank you!  
That worked 🥰

---

<div class="post-metadata">

**Author:** ![Sztt](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@Sztt](https://discourse.nodered.org/u/Sztt)\
**Post date:** [19 October 2022 08:55 UTC](https://discourse.nodered.org/t/svg-how-to-change-image-url-with-payload/68868/4 "2022-10-19T08:55:27Z")

</div>

like this ? # C://path

---

<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:** [19 October 2022 08:59 UTC](https://discourse.nodered.org/t/svg-how-to-change-image-url-with-payload/68868/5 "2022-10-19T08:59:36Z")

</div>

> [@Sztt](#):
>
> # C://path

No. Why would you do that?

I said ...

> [@Steve-Mcl](#):
>
> Try putting a `#` at the beginning of the selector value

in response to the OPs code ...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/948c965510a0b2178bccd4324add1a5ec1b92575.png)

e.g. `selector: "#e1_image",`

---

<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:** [2 November 2022 08:59 UTC](https://discourse.nodered.org/t/svg-how-to-change-image-url-with-payload/68868/6 "2022-11-02T08:59:45Z")

</div>

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