jgraph / jgraph/drawio

PNG export loses cssVars colors on SVG images

Open
#5,724 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
8.2k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Image cells themed via cssVars render correctly in the editor (light and dark), but Export as PNG outputs them in the SVG's fallback color - the custom colors are lost. Observed with light-dark() var values on locally referenced SVGs (new GitHub Octicons set, githubIcons branch); plain single-color values not isolated yet.

Repro

  1. Same-origin SVG using fill="var(--icon-color, #1f2328)", cell style shape=image;image=<file>.svg;cssVars=icon-color;--icon-color=light-dark(#CF222E,#F85149); (any Octicons sidebar entry on githubIcons + a non-default color does it)
  2. Renders correctly in editor, adapts to theme
  3. File > Export as > PNG - icon comes out in fallback/default color

Diagnosis so far

  • Editor.prototype.exportToCanvas (Editor.js:6128) never flips mxUtils.lightDarkColorSupported - unlike createEmbedSvg (EditorUi.js:~10168) - so cssVars values reach the export SVG as raw light-dark(). Theme handling in this path is only the color-scheme stamp on the root (Editor.js:9494) + rasterizer resolution.
  • The referenced <use href> is retargeted by convertUses (Editor.js:5103) to a symbol inlined via convertImageToDataUri -> Graph.createSvgImageSymbol (data-URI-only, Graph.js:4043); the --icon-color style rides on the <use>.
  • Where exactly the value dies in rasterization isn't pinned down - suspects: light-dark() resolution in detached SVG-as-image contexts (cf. the "detached canvas uses color-scheme normal" note at Editor.js:1743), or a convertImages stage dropping the vars. Next step would be inspecting the post-convertImages markup.
  • Attempted (didn't help, not committed): resolving light-dark() inside Graph.getCssVariables via getLightDarkColor().cssText when !mxUtils.lightDarkColorSupported. Correct for the paths that flip that flag (createEmbedSvg, export.js:237, legacy browsers) but dormant in plain PNG export, since exportToCanvas never flips it.

Not a data problem - diagram XML and SVG files are correct; live rendering and SVG export contexts are fine.

Possibly related: #5619 (GIF export uses light-mode colors in dark mode - same exportToCanvas family).

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in Editor.js at exportToCanvas (around 6128), then trace convertUses and convertImageToDataUri into Graph.js createSvgImageSymbol (around 4043). Inspect the post-convertImages SVG and compare the export path with createEmbedSvg in EditorUi.js and export.js. Done means PNG export preserves cssVars colors, including light-dark() values, for themed locally referenced SVG images in both themes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.