feat(altair): rename inline to raw_svg and add external resource warning for SVG

Author: daizutabi

marimo/_output/formatters/altair_formatters.py

@@ -2,6 +2,7 @@
 from __future__ import annotations
 
 import json
+import re
 from typing import Any
 from urllib.request import urlopen
 
@@ -82,8 +83,9 @@ def _show_chart(chart: AltairChartType) -> tuple[KnownMimeType, str]:
                     if isinstance(mime_response, str):
                         if (
                             mime_type == "image/svg+xml"
-                            and not altair.renderers.options.get("inline")
+                            and not altair.renderers.options.get("raw_svg")
                         ):
+                            _maybe_warn_external_resources(mime_response)
                             svg_bytes = mime_response.encode()
                             data_url = io_to_data_url(svg_bytes, mime_type)
                             return (mime_type, data_url or "")
@@ -135,6 +137,27 @@ def _format_png_mimebundle(
     return "application/vnd.marimo+mimebundle", json.dumps(mimebundle)
 
 
+# Check if the SVG contains external resources that may not render
+# correctly when encoded as a Data URL.
+# https://github.com/marimo-team/marimo/pull/9104
+def _maybe_warn_external_resources(svg: str) -> None:
+    # Strictly detecting external resource usage in SVG is difficult;
+    # as a heuristic, we check for 'href' or 'xlink:href' attributes
+    # that point to external resources (ignoring internal '#' or 'data:' URLs).
+    if re.search(
+        r'<[^>]*\b(?:xlink:)?href\s*=\s*["\'](?!\s*(?:#|data:))[^"\']+', svg
+    ):
+        msg = "".join(
+            [
+                "This SVG contains external resources (href/xlink:href) ",
+                "that may not render correctly when encoded as a Data URL. ",
+                "If images are missing, try enabling raw SVG rendering with: ",
+                "altair.renderers.enable('svg', raw_svg=True).",
+            ]
+        )
+        LOGGER.warning(msg)
+
+
 # This is only needed since it seems that altair does not
 # handle this internally.
 # https://github.com/marimo-team/marimo/issues/2302

marimo/_smoke_tests/altair_examples/altair_svg_rendering.py

@@ -12,14 +12,17 @@
 
 import marimo
 
-__generated_with = "0.22.0"
+__generated_with = "0.23.1"
 app = marimo.App(width="medium")
 
 with app.setup:
     import marimo as mo
     import altair as alt
     import pandas as pd
 
+    # Verify vl-convert-python is installed; it's required for the SVG renderer.
+    import vl_convert as vlc
+
 
 @app.cell
 def _():
@@ -29,7 +32,6 @@ def _():
 
 @app.cell
 def _(data):
-    # Issue #9015: SVG charts in layouts render raw base64 string
     alt.renderers.enable("svg")
 
     chart = alt.Chart(data).mark_point().encode(x="x", y="y")
@@ -45,8 +47,10 @@ def _(chart):
 
 @app.cell
 def _(chart):
-    # This renders the raw base64-encoded string (issue #9015)
-    mo.vstack([chart])
+    # SVG outputs should be correctly rendered in vstack or hstack
+    # (reported in Issue #9015 and fixed in PR #9043).
+    # For vstack, align="start" is needed to preserve the image size
+    mo.vstack([chart], align="start")
     return
 
 
@@ -78,17 +82,20 @@ def _(chart_with_images):
 
 @app.cell
 def _(chart_with_images):
-    # Image marks should not be broken
+    # Image marks are broken.
+    # The root cause is the browser's security restriction.
+    # When marimo detects an SVG with external resources (e.g., image URLs),
+    # it warns the user to enable 'raw_svg=True' for correct rendering.
     alt.renderers.enable("svg")
     chart_with_images
     return
 
 
 @app.cell
 def _(chart_with_images):
-    # Image marks should not be broken
-    alt.renderers.enable("svg")
-    mo.hstack([chart_with_images])
+    # Image marks are correctly rendered when 'raw_svg=True' is enabled.
+    alt.renderers.enable("svg", raw_svg=True)
+    chart_with_images
     return
 
 

tests/_output/formatters/test_altair_formatters.py

@@ -158,21 +158,21 @@ def test_altair_formatter_mimebundle():
 
 @pytest.mark.skipif(not HAS_DEPS, reason="altair not installed")
 @pytest.mark.parametrize(
-    ("inline", "expected"),
+    ("raw_svg", "expected"),
     [
         (True, "<svg></svg>"),
         (False, "data:image/svg+xml;base64,PHN2Zz48L3N2Zz4="),
     ],
 )
-def test_altair_formatter_svg(inline: bool, expected: str):
+def test_altair_formatter_svg(raw_svg: bool, expected: str):
     AltairFormatter().register()
 
     import altair as alt
 
     # Create a mock chart with a _repr_mimebundle_ method that returns SVG
     mock_chart = alt.Chart(get_data()).mark_point()
     with (
-        patch.dict(alt.renderers.options, {"inline": inline}),
+        patch.dict(alt.renderers.options, {"raw_svg": raw_svg}),
         patch.object(
             alt.Chart,
             "_repr_mimebundle_",