Any way to edit the layout in an svg editor?

[mirams]

I have the card (which is great, thanks for the work on it!) showing on a raspberry pi touchscreen, so the dimensions are 800 x 480. I'm using the lite/compact card and it is 500x400, so I can have either only part of flowcard height showing, but filling the width, or all the height showing but lots of blank space at the edges.

I'd like to alter the svg template to use all the available space on the screen (in my own fork is fine).

So this might be a silly question, but is there a way to edit the layout in an svg editor with GUI (e.g. inkscape), or does it all need doing manually in the index.ts file as it is tied in with code instructions (i.e. is that how the developers alter the layout now?). I saw the earliest commits had a draw.io folder with the .svg in it, but that seems to have gone now?

[slipx06]

You will need to edit the index.ts file . Specifically the lines below

sunsynk-power-flow-card/src/index.ts

Lines 3089 to 3092 in 845a639

	<svg viewBox="-0.5 ${!config.show_solar ? (additional_load !== 0 || !config.show_battery ? 80 : 145.33) : -0.5} 483 ${!config.show_solar ? (config.show_battery ? (additional_load !== 0 ? 350 : 270.67) : 270.67) : (!config.show_battery ? (additional_load === 2 ? 350 : 300) : 406)}"
	preserveAspectRatio="xMidYMid meet"
	height="${panel === false ? `${!config.show_solar && !config.show_battery ? '270px' : !config.show_solar ? (additional_load !== 0 ? '330px' : '246px') : config.show_solar && !config.show_battery ? (additional_load === 2 ? '350px' : '300px') : `${height}`}` : `${!config.show_solar ? '75%' : '100%'}`}"
	width="${panel === true ? `${width}` : '100%'}" xmlns:xlink="http://www.w3.org/1999/xlink">

I would start by adjusting the preserveAspectRatio and set it to none. You can then manually set the height and width attributes.