# Optimal size for an SVG in the dashboard

**URL:** <https://discourse.nodered.org/t/optimal-size-for-an-svg-in-the-dashboard/28329>\
**Category:** General\
**Created:** [14 June 2020 21:54 UTC](https://discourse.nodered.org/t/optimal-size-for-an-svg-in-the-dashboard/28329 "2020-06-14T21:54:48Z")\
**Posts on this page:** 3\
**Page:** 1

<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:** [14 June 2020 21:54 UTC](https://discourse.nodered.org/t/optimal-size-for-an-svg-in-the-dashboard/28329/1 "2020-06-14T21:54:48Z")

</div>

Hi folks,

Unfortunately I still didn't have time yet to use my _ **node-red-contrib-ui-svg node** _ myself 😩  
How stupid is that ...

So would be nice to get some feedback from users that have used it already.  
More specifically about the size of the SVG compared to the widget size.

1. I specify some size of the dashboard widget:

2. Now I assumed that I have to have the SVG fit that parent widget container:

Here is an simple flow (for anybody who wants to experiment) that shows a 900x550px image in an svg (with orange blackground):

```auto
[{"id":"2399b014.7c6ad","type":"ui_svg_graphics","z":"4ae15451.7b2f5c","group":"2df28529.6748aa","order":2,"width":"12","height":"11","svgString":"<svg width=\"100%\" height=\"100%\" \n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"> \n <rect width=\"100%\" height=\"100%\" fill=\"orange\"/>\n <image href=\"https://www.securitymagazine.com/ext/resources/SEC/2016/0216/SEC0216-edu-feature-slide1_900px.jpg\" height=\"100%\" width=\"100%\" preserveAspectRatio=\"xMidYMid meet\"/>\n</svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"selectorAsElementId":true,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","panEnabled":false,"zoomEnabled":false,"controlIconsEnabled":false,"dblClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"","x":520,"y":580,"wires":[[]]},{"id":"2df28529.6748aa","type":"ui_group","z":"","name":"Default","tab":"70e1bf49.ae7ee","order":1,"disp":true,"width":"12","collapse":false},{"id":"70e1bf49.ae7ee","type":"ui_tab","z":"","name":"Background test","icon":"dashboard","disabled":false,"hidden":false}]

```

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

All tips are very welcome!  
Bart

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [15 June 2020 06:51 UTC](https://discourse.nodered.org/t/optimal-size-for-an-svg-in-the-dashboard/28329/2 "2020-06-15T06:51:08Z")

</div>

> [@BartButenaers](#):
>
> General question: I give it a long size in the X-direction, to fit nicely on a horizontal placed tablet. However on a smartphone it should be longer in the Y-direction I assume. How can I deal with that?

For me there is only one solution and it limits a lot what you can do.  
If you try to target multiple screen sizes, the widest card must fit into smallest screen. (If you don't want to see sidebars.) With devices you also must choose one best fitted orientation.  
Doing that you also must choose how many units the widest card must have. Fine-tuning can be done with 1x1 widget size. Do not go to extreme values with that.

That done, you can always calculate exact dimensions for content based on 1x1 widget size, widget spacing, count of units and gaps in direction (and depending on theme, the padding also may affect)

Otherwise you have that "difficult draw with percentages" option which again may or may not satisfy your needs. That depends on the content ...

---

<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:** [14 August 2020 06:51 UTC](https://discourse.nodered.org/t/optimal-size-for-an-svg-in-the-dashboard/28329/3 "2020-08-14T06:51:26Z")

</div>

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