# Dashboard- svg problem

**URL:** <https://discourse.nodered.org/t/dashboard-svg-problem/44215>\
**Category:** Dashboard\
**Created:** [15 April 2021 07:12 UTC](https://discourse.nodered.org/t/dashboard-svg-problem/44215 "2021-04-15T07:12:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)\
**Post date:** [15 April 2021 07:12 UTC](https://discourse.nodered.org/t/dashboard-svg-problem/44215/1 "2021-04-15T07:12:11Z")

</div>

Hi all !

I want to use the contrib-ui-svg to get the SVG layout from a hardware controller. I have a test file which is working great in chrome browser, and also tested fine in Method Draw Vector Editor :

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

However I can't get it to work in Dahboard, I only get a very small part of the drawing. ( the internal node SVG editor does not work as well) .  
I tried with code pasted into the node, injected "replace\_svg" , with "" escaped or not.... no luck.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/67699c91f720b64f0747202812e48cc45a3b8efa.jpeg)

The dashboard layout for group and node is set to the max size....

Any idea ?

Thanks !

---

<div class="post-metadata">

**Author:** ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)\
**Post date:** [16 April 2021 12:37 UTC](https://discourse.nodered.org/t/dashboard-svg-problem/44215/2 "2021-04-16T12:37:17Z")

</div>

Hi, no one as an idea ?

here is the node with embedded SVG code , if it helps :

```auto
[{"id":"16a953b2.21beec","type":"ui_svg_graphics","z":"8c726783.556348","group":"2908388b.8114b8","order":0,"width":"30","height":"36","svgString":"<svg >\n\t\t<defs>\n\t\t <linearGradient id=\"frontplate\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n\t\t <stop offset=\"0%\" style=\"stop-color:rgb(99, 171, 235);stop-opacity:1\" />\n\t\t <stop offset=\"50%\" style=\"stop-color:rgb(25, 108, 173);stop-opacity:1\" />\n\t\t <stop offset=\"100%\" style=\"stop-color:rgb(26, 90, 147);stop-opacity:1\" />\n\t\t </linearGradient>\n\t\t <linearGradient id=\"topedge\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n\t\t <stop offset=\"0%\" style=\"stop-color:rgb(13,13,13);stop-opacity:1\" />\n\t\t <stop offset=\"8%\" style=\"stop-color:rgb(39,39,39);stop-opacity:1\" />\n\t\t <stop offset=\"15%\" style=\"stop-color:rgb(60,60,60);stop-opacity:1\" />\n\t\t <stop offset=\"92%\" style=\"stop-color:rgb(76,76,76);stop-opacity:1\" />\n\t\t <stop offset=\"100%\" style=\"stop-color:rgb(40,40,40);stop-opacity:1\" />\n\t\t </linearGradient>\n\t\t <linearGradient id=\"bottomedge\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n\t\t <stop offset=\"0%\" style=\"stop-color:rgb(86,86,86);stop-opacity:1\" />\n\t\t <stop offset=\"12%\" style=\"stop-color:rgb(61,61,61);stop-opacity:1\" />\n\t\t <stop offset=\"92%\" style=\"stop-color:rgb(38,38,38);stop-opacity:1\" />\n\t\t <stop offset=\"100%\" style=\"stop-color:rgb(37,37,37);stop-opacity:1\" />\n\t\t </linearGradient>\n\t\t <linearGradient id=\"sides\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n\t\t <stop offset=\"0%\" style=\"stop-color:rgb(24,24,24);stop-opacity:1\" />\n\t\t <stop offset=\"1%\" style=\"stop-color:rgb(47,47,47);stop-opacity:1\" />\n\t\t <stop offset=\"1.2%\" style=\"stop-color:rgb(62,62,62);stop-opacity:1\" />\n\t\t <stop offset=\"8%\" style=\"stop-color:rgb(80,80,80);stop-opacity:1\" />\n\t\t <stop offset=\"89%\" style=\"stop-color:rgb(36,36,36);stop-opacity:1\" />\n\t\t <stop offset=\"93%\" style=\"stop-color:rgb(41,41,41);stop-opacity:1\" />\n\t\t <stop offset=\"99%\" style=\"stop-color:rgb(36,36,36);stop-opacity:1\" />\n\t\t <stop offset=\"100%\" style=\"stop-color:rgb(52,52,52);stop-opacity:1\" />\n\t\t </linearGradient>\n\t\t </defs>\n\t\t <style>\n\t\t\t\ttext {font-family:Sans,Arial;}\n\t\t .sections {\n\t\t \tstroke: white;\n\t\t \tstroke-width: 3;\n\t\t \tfill: gray;\n\t\t \tfill-opacity: 0.4;\n\t\t \tstroke-opacity: 0.2;\n\t\t \tstroke-dasharray: 20, 10;\n\t\t\t }\n\t\t </style>\n\t\t<rect width=\"2940\" height=\"172\" x=\"50\" y=\"67\" style=\"fill:url(#topedge);\" />\n\t\t<rect width=\"2940\" height=\"1380\" x=\"50\" y=\"239\" style=\"fill:url(#frontplate);\" />\n\t\t<rect width=\"2940\" height=\"180\" x=\"50\" y=\"1619\" style=\"fill:url(#bottomedge);\" />\n\t\t<rect width=\"60\" height=\"1743\" x=\"0\" y=\"63\" style=\"fill:url(#sides);\" rx=\"10\" ry=\"10\" />\n\t\t<rect width=\"60\" height=\"1743\" x=\"2980\" y=\"63\" style=\"fill:url(#sides);\" rx=\"10\" ry=\"10\" />\n\n\t\t<rect width=\"1052\" height=\"260\" x=\"110\" y=\"270\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t\t<rect width=\"1052\" height=\"60\" x=\"110\" y=\"530\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t\t<rect width=\"1390\" height=\"140\" x=\"110\" y=\"630\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t\t<rect width=\"700\" height=\"140\" x=\"1500\" y=\"630\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t\t<rect width=\"2090\" height=\"175\" x=\"110\" y=\"980\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t\t<rect width=\"2090\" height=\"175\" x=\"110\" y=\"1355\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":true,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"both","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":"150","name":"svg-graphics","x":970,"y":180,"wires":[["4672821a.2f296c"]]},{"id":"2908388b.8114b8","type":"ui_group","name":"Floorplan test","tab":"a28ff08f.3a822","order":1,"disp":true,"width":"30","collapse":false},{"id":"a28ff08f.3a822","type":"ui_tab","name":"SVG","icon":"dashboard","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:** [16 April 2021 15:30 UTC](https://discourse.nodered.org/t/dashboard-svg-problem/44215/3 "2021-04-16T15:30:56Z")

</div>

Hi Jerome,  
Have you searched for other discussions about svg dimensions (like e.g. this [one](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/64))? I see in your svg string above that you have an svg tag without ´width´, ´height´ or ´viewbox´ attributes, so you might start by adding those. I don't work with Node-RED temporarily, so can't give you an updated flow. But you can find many examples on the web, e.g. [here](https://stackoverflow.com/a/58560034).  
Bart

---

<div class="post-metadata">

**Author:** ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)\
**Post date:** [16 April 2021 17:33 UTC](https://discourse.nodered.org/t/dashboard-svg-problem/44215/4 "2021-04-16T17:33:18Z")

</div>

Thanks Bart.

Did not know these were mandatory info as the svg would load fine in a browser... I just played with group and node sizes.

Will dig into it, and come back with results.

Cheers

Jerome

---

<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 April 2021 18:04 UTC](https://discourse.nodered.org/t/dashboard-svg-problem/44215/5 "2021-04-16T18:04:50Z")

</div>

> [@JeromeVISUALS](#):
>
> I just played with group and node sizes.

That way you only tell the Node-RED dashboard how may space it should make available for the SVG. But you also have to tell the SVG to make use of that available space, by filling it. Otherwise you end up with a lot of empty space...

---

<div class="post-metadata">

**Author:** ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)\
**Post date:** [19 April 2021 07:58 UTC](https://discourse.nodered.org/t/dashboard-svg-problem/44215/6 "2021-04-19T07:58:18Z")

</div>

Hi Bart,

thanks a lot for helping me moving in the right direction. Still have some tuning to do, but I can see improvment here

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

Have a great day.

Jerome

---

<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:** [19 May 2021 07:59 UTC](https://discourse.nodered.org/t/dashboard-svg-problem/44215/7 "2021-05-19T07:59:15Z")

</div>

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