SVG export of styles in Firefox is broken.

[NiklasRentzCAU]

I am looking at a graph generated by the theia-xtext-sprotty-example project. Both in Chrome and in Firefox the graphs look good when viewed in Theia. After using the export feature (alt+E) on the diagram, only the Chrome-exported SVG works in most viewers, the Firefox-exported one does not work in most viewers, even Firefox itself cannot display the SVG anymore.

These are the SVGs exported by the different browsers: MrsGrantsSecretCompartment.zip The first file is the Chrome-generated, the one ending in '1' is generated by Firefox and the file ending with '1-modified' is the same file by Firefox with the topmost style attribute in the

This is the statemachine used to generate the diagrams:

statemachine MrsGrantsSecretCompartment

event doorClosed
event drawOpened
event lightOn
event panelClosed

state active
    lightOn => waitingForDraw
    drawOpened => waitingForLight

state idle
    doorClosed => active

state waitingForLight
    lightOn => idle

state waitingForDraw
    drawOpened => unlockedPanel

state unlockedPanel
    panelClosed => idle

[christoph-fricke]

The same problem exists in VSCode extensions!

The following zip include a SVG generated with the states example extension in the sprotty-vscode Repo. The other two SVG are SVGs generated by a standalone view in Chrome and another VSCode extension: examples.zip

All examples use the latest Sprotty versions. Only the SVG generated in Chrome works. Both SVGs generated by VSCode extension contain unnecessary inline styles on the svg tag. Interestingly, their styles are quite different.

The problematic rule appears to be inline-size: 0px. Further, the sccharts-vscode.svg file also contains the rule block-size: 0px, which causes the svg to have a height of 0px. Removing both rules renders the SVGs.