fix: SVG data URL rendering in layout elements#9043
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
mscolnick
approved these changes
Apr 6, 2026
|
🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.22.5-dev6 |
6 tasks
Light2Dark
pushed a commit
that referenced
this pull request
Apr 16, 2026
## 📝 Summary This PR restores the behavior of outputting Altair SVG charts as base64-encoded Data URLs, following the improvements made to marimo's layout rendering. ## Background and Justification - **Layout Compatibility:** The issue where Altair SVG Data URLs failed to render within layout elements (like `mo.vstack`) reported in #9015 has been addressed in #9043. By wrapping SVG Data URLs in `<img>` tags within `mime_to_html`, they now render correctly across all layout components. - **Image Mark Limitation (#9013):** While using Data URLs for SVGs prevents external resources (such as `mark_image`) from loading due to browser security restrictions, this is consistent with the behavior in JupyterLab. It is a limitation of the SVG-as-image format itself rather than a bug in marimo's formatter. - **Consistency:** Converting SVG to Data URLs ensures that Altair's SVG output is handled consistently with other image-based formats (like PNG or JPEG). ## Changes - Updated `marimo/_output/formatters/altair_formatters.py` to encode `image/svg+xml` string responses into base64 Data URLs. - Updated `tests/_output/formatters/test_altair_formatters.py` to reflect the change in the expected output format. ## 📋 Pre-Review Checklist <!-- These checks need to be completed before a PR is reviewed --> - [ ] For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on [Discord](https://marimo.io/discord?ref=pr), or the community [discussions](https://github.com/marimo-team/marimo/discussions) (Please provide a link if applicable). - [ ] Any AI generated code has been reviewed line-by-line by the human PR author, who stands by it. - [ ] Video or media evidence is provided for any visual changes (optional). <!-- PR is more likely to be merged if evidence is provided for changes made --> ## ✅ Merge Checklist - [x] I have read the [contributor guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md). - [ ] Documentation has been updated where applicable, including docstrings for API changes. - [x] Tests have been added for the changes made.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝 Summary
This PR fixes #9015 where SVG charts (from Altair, Matplotlib, or other sources) would render as raw Base64 strings instead of images when placed inside layout elements like
mo.vstackormo.hstack.Problem
Previously, marimo treated all
image/svg+xmldata as raw HTML. While this works for raw<svg>tags, it is incorrect for SVG Data URLs (data:image/svg+xml;base64,...). When a Data URL is wrapped in anHtmlobject and inserted into a layout, the browser renders it as a plain text string rather than an image.This issue was observed in:
alt.renderers.enable("svg")is used.plt.rcParams["savefig.format"] = "svg"is set.Solution
The fix involves updating
mime_to_htmlinmarimo/_output/formatting.pyto distinguish between:Htmlfor inline rendering.<img>tag, ensuring they are rendered as images.Since representing SVG as a Data URL is a valid and common practice, this approach is more robust than the previous assumption that all SVG data is raw HTML.
Screenshots
Testing
tests/_output/formatters/test_matplotlib.pythat specifically verifies Matplotlib's SVG output behaves correctly inside a marimo layout.📋 Pre-Review Checklist
✅ Merge Checklist