MainUI Fixed Canvas Page: Embedded SVG breaks positions and CSS styles in Run Mode (openHAB 5.1.4)

christoph_kowatschik · June 28, 2026, 12:58pm

Update:
Oh my god .. the only issue was that I didnt use a new filename after removing the transformation issue … now it works and I can continue with my first project … config currently also simplified as all definitions so far in the csv .. will see how it works adding item values and animation based on item values
I assume there is no easy way to force a reload of a file with the same name without restarting openhab clean? … only way right now seems to be to store each change in a new filename and change the filename in the config…

Hi everyone,
I am facing a persistent issue on a Fixed Canvas Page in openHAB 5.1.4. I created a custom SVG file in Inkscape containing several distinct object groups (#aerotherm-fan and #aerotherm-outdoor).

In Design Mode: Everything works flawlessly. The SVG is positioned correctly, the fan rotates via a global stylesheet, and colors are correct.
In Run Mode (embedSvg: true): The page momentarily flashes a framework error (“Failed to…”), then all SVG elements default to the top-left corner, one group loses its background fill, and the CSS rotation stops entirely.

What I have already done to debug:

Applied embedSvg: true to the canvas config.
Formatted the SVG in Inkscape using “Store Transformation: Optimized” and flattened all groups so that no transform="translate(...)" attributes remain in the source file.
Changed all SVG IDs to lowercase with hyphens (aerotherm-fan) to avoid Framework7 case-sanitization bugs.
Wrapped the stylesheet via the global stylesheet: property using !important flags.

Here is my current YAML configuration:

yaml

config:
  label: Test SVG
  layoutType: fixed
  fixedType: canvas
  imageUrl: /static/HeizungTest5.svg
  embedSvg: false
  embedSvgFlashing: false
  blocks: []
blocks: []
masonry: []
grid: []
canvas: []

It seems like MainUI’s SVG sanitizer or the Framework7 wrapper drops the embedded DOM tree or strips out styling blocks right after initial render. Has anyone experienced this short-lived render error or found a way to properly target deeply nested SVG groups in 5.x Run Mode?

Thanks for any hints!
I would like to create a comprehensive Heating System Page but struggle with the first object already post prepared by google KI