# Display text in svg graphic

**URL:** <https://discourse.nodered.org/t/display-text-in-svg-graphic/86002>\
**Category:** Dashboard\
**Created:** [28 February 2024 14:24 UTC](https://discourse.nodered.org/t/display-text-in-svg-graphic/86002 "2024-02-28T14:24:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ninaaa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ninaaa/32/93493_2.png) [@ninaaa](https://discourse.nodered.org/u/ninaaa)\
**Post date:** [28 February 2024 14:24 UTC](https://discourse.nodered.org/t/display-text-in-svg-graphic/86002/1 "2024-02-28T14:24:14Z")

</div>

@BartButenaers

I would be interested to know if the text can also be used as input?

I don't want to send anything to SVG, but I want to enter something in SVG, for example a target value.

Thanks  
Greetings

---

<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:** [28 February 2024 16:24 UTC](https://discourse.nodered.org/t/display-text-in-svg-graphic/86002/2 "2024-02-28T16:24:41Z")

</div>

Hi @ninaaa,

Yes that should be possible in most modern browsers. The idea is to use a standard HTML input element as _ **foreign element** _ (i.e. non-SVG element) inside the SVG.

You can read more about it in [this](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Use-non-SVG-html-elements-(as-foreign-elements)) tutorial on my wiki.

Here is the demo animation from that wiki page:

![svg_foreign_input](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/83f79f5c2c9d2aa1b3c983b631335886630772df.gif)

Good luck with it,  
Bart

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [28 February 2024 17:13 UTC](https://discourse.nodered.org/t/display-text-in-svg-graphic/86002/3 "2024-02-28T17:13:29Z")

</div>

Also see [Display text in a svg graphic](https://discourse.nodered.org/t/display-text-in-a-svg-graphic/83208)

---

<div class="post-metadata">

**Author:** ![ninaaa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ninaaa/32/93493_2.png) [@ninaaa](https://discourse.nodered.org/u/ninaaa)\
**Post date:** [4 March 2024 13:21 UTC](https://discourse.nodered.org/t/display-text-in-svg-graphic/86002/4 "2024-03-04T13:21:30Z")

</div>

Thanks first of all.  
I've been playing with it for a few days now.  
Unfortunately you cannot edit it in the SVG editor.  
In the Fire-Fox browser I have some problems with the size of the input field.  
To do this, I would like to change the font and remove the arrows and center the input more.  
What I'm also missing is the ability to show/hide the input window.

If anyone has any tips please share them

Greetings

---

<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:** [3 April 2024 13:22 UTC](https://discourse.nodered.org/t/display-text-in-svg-graphic/86002/5 "2024-04-03T13:22:26Z")

</div>

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