# \[Announce\] node-red-contrib-ui-svg

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063>\
**Category:** Share Your Nodes\
**Created:** [23 October 2019 21:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063 "2019-10-23T21:38:54Z")\
**Posts on this page:** 1\
**Showing post:** 64

<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:** [8 January 2021 20:59 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/64 "2021-01-08T20:59:45Z")

</div>

Hi @vkuehn,

> [@vkuehn](#):
>
> can you give me a hint how to avoid this scrollbar

The following flow loads a 600x400 image (generated via [https://dummyimage.com/](https://dummyimage.com/)) and shows it inside the SVG:

```auto
<svg width="100%" height="100%" enable-background="new 0 0 250 250" xmlns="http://www.w3.org/2000/svg">/svg> 
   <image width="100%" height="100%" xlink:href="https://dummyimage.com/600x400/000/fff" />
</svg>

```

So the SVG fits (100% width and height) the available are, which has been allocated by the dashboard. And the image fits (100% width and height) into the SVG drawing.  
The result is an image fitting nicely:

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

```auto
[{"id":"9d8d5a1e.a63e98","type":"ui_svg_graphics","z":"7f1827bd.8acfe8","group":"2fa9557d.3cbe1a","order":0,"width":"6","height":"5","svgString":"<svg width=\"100%\" height=\"100%\" enable-background=\"new 0 0 250 250\" xmlns=\"http://www.w3.org/2000/svg\">/svg> \n<image width=\"100%\" height=\"100%\" xlink:href=\"https://dummyimage.com/600x400/000/fff\" />\n</svg>","clickableShapes":[{"targetId":"#light_living","action":"click","payload":"light_living","payloadType":"str","topic":"light_living"},{"targetId":"r","action":"click","payload":"r","payloadType":"str","topic":"r"}],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":true,"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":"","x":700,"y":2600,"wires":[[]]},{"id":"2fa9557d.3cbe1a","type":"ui_group","z":"","name":"Fit available area","tab":"680a9e2f.a6726","order":1,"disp":true,"width":"6","collapse":false},{"id":"680a9e2f.a6726","type":"ui_tab","z":"","name":"SVG size","icon":"dashboard","disabled":false,"hidden":false}]

```

> [@vkuehn](#):
>
> and maybe how you got a even bigger map/svg loaded ?

So you can load even bigger images, it will still fit.  
Is this an answer to your question, or did I misunderstood it??

---

_[View the full topic](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063)._