SVG output of Drawio has black forms in Sozi

[ericzolf]

Preflight Checklist

• I agree to follow the Code of Conduct that this project adheres to.
• [ x I have searched the issue tracker for a feature request that matches the one I want to file, without success.

You must agree to search and the code of conduct. You must fill in this entire template. If you delete part/all or miss parts out your issue will be closed.

If you are technical, you should report bugs along the lines of https://marker.io/blog/how-to-write-bug-report. If you are not technical, we will make allowances, please try to make an effort to understand the process.

Describe the bug
I have a regression between drawio 24.7.17 and 26.0.9 (the issue happened already with latest but its version is unclear, 26.0.8?): the forms in the SVG output appear black in Sozi, even though they're white in Drawio. This didn't happen in older versions of Drawio.

To Reproduce
Steps to reproduce the behavior:

1. Add a few figures to a blank page (circle, square, triangle, whatever)
2. Save as drawio.svg
3. Open in Sozi
4. The figures are black even though they're white in Drawio

Expected behavior
The figures have the same color as in Drawio, as it used to be with Drawio 24.
I went a few times between Drawio 24 and Drawio 26, and could repeat the issue and make it disappear accordingly.
Interestingly enough, I need to restart Firefox to have a clean switch (but I guess that's some caching effect).

Screenshots

draw.io version (In the Help->About menu of the draw.io editor):

• draw.io version 26.0.9

Desktop (please complete the following information):

• OS: Linux Fedora 41
• Browser Firefox 135.0
• Browser Version [e.g. 22]

Smartphone (please complete the following information):
n/a

I tested the problem in incognito/private mode with all browser extensions switched off, write "yes" below:

• I tested both behaviors on the same browser with a restart between both.

Additional context
I'm using the Docker image with podman podman run --rm --name="drawio" --detach -p 8080:8080 -p 8443:8443 docker.io/jgraph/drawio:26.0.9 (resp. latest or 24.7.17).

[davidjgraph]

What does the SVG show in a browser?

[ericzolf]

Interesting: seen in Firefox, the SVG shows black, whereas it looks normal (white) in Chromium (Version 132.0.6834.159 (Official Build) Fedora Project (64-bit)). This said, if I run drawio in Chromium and save the file from there, the result still has the issue as described.

As a side note, my desktop is in dark mode (and so my browsers). As another side note, inkscape sees the SVG as white.

And, apparently, Sozi comes with a fairly old (2021?) version of a chrome-sandbox (Electron 20 according to https://github.com/sozi-projects/Sozi/releases/tag/v23.07).

So, apparently, something in Drawio 26 broke the rendering in Firefox and older versions of Chromium/Chrome (or made apparent some breakage in Firefox' engine). Can you nevertheless identify and fix the issue?

[ericzolf]

OK, gvimdiff is my friend and I see the differences. Here the simplest expression I could find (but the light-dark thingy seems everywhere involved):

before: fill="rgb(0, 0, 0)"

after: fill="light-dark(#000000, #ffffff)"

Here the full diff (manipulated to make more readable:

<path d="M 190 10 L 270 10 L 290 50 L 270 90 L 190 90 L 170 50 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
---
<path d="M 190 10 L 270 10 L 290 50 L 270 90 L 190 90 L 170 50 Z" fill="#ffffff" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>


<div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); ">
<div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">TEST</div>
---
<div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
<div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">TEST</div>


<text x="230" y="54" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">TEST</text>
---
<text x="230" y="54" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">TEST</text>


<path d="M 0 0 L 120 0 L 120 50 L 80 50 L 60 80 L 60 50 L 0 50 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
---
<path d="M 0 0 L 120 0 L 120 50 L 80 50 L 60 80 L 60 50 L 0 50 Z" fill="#ffffff" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>


<path d="M 410 25 C 410 16.72 423.43 10 440 10 C 447.96 10 455.59 11.58 461.21 14.39 C 466.84 17.21 470 21.02 470 25 L 470 75 C 470 83.28 456.57 90 440 90 C 423.43 90 410 83.28 410 75 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 470 25 C 470 33.28 456.57 40 440 40 C 423.43 40 410 33.28 410 25" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
---
<path d="M 410 25 C 410 16.72 423.43 10 440 10 C 447.96 10 455.59 11.58 461.21 14.39 C 466.84 17.21 470 21.02 470 25 L 470 75 C 470 83.28 456.57 90 440 90 C 423.43 90 410 83.28 410 75 Z" fill="#ffffff" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 470 25 C 470 33.28 456.57 40 440 40 C 423.43 40 410 33.28 410 25" fill="none" stroke="#000000" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));" stroke-miterlimit="10" pointer-events="all"/>

To be honest, I don't want my graph's color to be different depending on the light/dark choice of my browser (and I always set drawio to light mode actually, not automatic or dark!), that would look a bit weird to me.

[davidjgraph]

And in 26.0.14?

[ericzolf]

26.0.9 is the latest tag I can see: https://hub.docker.com/r/jgraph/drawio/tags?name=26
Is there another source?

[ericzolf]

OK, I used https://app.diagrams.net/ to test (26.0.15 at time of writing):

1. original in Firefox:
   

2. saved as SVG, seen in Firefox:
   

3. saved as SVG, seen in Chromium:
   

4. seen in Sozi:

5. exported from Sozi, seen in Firefox:

7. exported from Sozi, seen in Chromium:
   

I can accept that Sozi is too old and has a broken engine, but I still have an issue with having my graphic look different depending how or where it is rendered. Colors have a meaning and I want to know that my graph keeps them accurately (I don't create art, but still).

[alderg]

please attach the exported svg

[ericzolf]

Sure, here it is, together with the Sozi export:
testericzolf.zip

[alderg]

This file was exported with Appearance: Automatic, if you do this, then the exported SVG file will contain light-dark color functions. The minimum browser requirement for this is Chrome 123+, Firefox 120+, Safari 17.5+, Opera 109+, WebView Android 131+, Safari iOS 17.5+ and Edge 123+.

Use Appearance: Light instead to get a more compatible output.

[ericzolf]

Aaah, I wasn't exporting, I was saving, and there I can't set the appearance, can I? In all cases, fair enough, I can export and embed instead of saving.

[alderg]

Not currently, no.