Hi @vkuehn,
The following flow loads a 600x400 image (generated via https://dummyimage.com/) and shows it inside the SVG:
<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:
[{"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}]
So you can load even bigger images, it will still fit.
Is this an answer to your question, or did I misunderstood it??
