PNG export loses cssVars colors on SVG images
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
- Same-origin SVG using
fill="var(--icon-color, #1f2328)", cell styleshape=image;image=<file>.svg;cssVars=icon-color;--icon-color=light-dark(#CF222E,#F85149);(any Octicons sidebar entry ongithubIcons+ a non-default color does it) - Renders correctly in editor, adapts to theme
- File > Export as > PNG - icon comes out in fallback/default color
Diagnosis so far
Editor.prototype.exportToCanvas(Editor.js:6128) never flipsmxUtils.lightDarkColorSupported- unlikecreateEmbedSvg(EditorUi.js:~10168) - so cssVars values reach the export SVG as rawlight-dark(). Theme handling in this path is only thecolor-schemestamp on the root (Editor.js:9494) + rasterizer resolution.- The referenced
<use href>is retargeted byconvertUses(Editor.js:5103) to a symbol inlined viaconvertImageToDataUri->Graph.createSvgImageSymbol(data-URI-only, Graph.js:4043); the--icon-colorstyle 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()insideGraph.getCssVariablesviagetLightDarkColor().cssTextwhen!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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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