SVG `<use>` elements not rendered when MIME type is `image/svg+xml`

[daizutabi]

Describe the bug

When an SVG image containing <defs> and <use> elements (e.g., for reusing shapes, text glyphs from matplotlib.rcParams["svg.fonttype"] = "path", or axis tick lines) is displayed in a marimo notebook with the image/svg+xml MIME type, the <use> elements and their referenced content are not rendered in the marimo frontend. This results in incomplete or broken SVG visuals.

However, the same SVG content renders correctly in the marimo frontend if it is embedded within a text/html MIME type (e.g., by passing the SVG string to mo.Html()). It also renders correctly when the marimo notebook is exported to ipynb format.

Related: #8312

Will you submit a PR?

• Yes

Environment

Details

{
  "marimo": "0.19.11",
  "editable": true,
  "location": "/home/daizu/marimo/marimo",
  "OS": "Linux",
  "OS Version": "6.6.87.2-microsoft-standard-WSL2",
  "Processor": "x86_64",
  "Python Version": "3.12.12",
  "Locale": "--",
  "Binaries": {
    "Browser": "--",
    "Node": "v22.21.1",
    "uv": "0.6.17"
  },
  "Dependencies": {
    "click": "8.3.1",
    "docutils": "0.22.4",
    "itsdangerous": "2.2.0",
    "jedi": "0.19.2",
    "markdown": "3.10.2",
    "narwhals": "2.16.0",
    "packaging": "26.0",
    "psutil": "7.2.2",
    "pygments": "2.19.2",
    "pymdown-extensions": "10.20.1",
    "pyyaml": "6.0.3",
    "starlette": "0.52.1",
    "tomlkit": "0.14.0",
    "typing-extensions": "4.15.0",
    "uvicorn": "0.40.0",
    "websockets": "16.0"
  },
  "Optional Dependencies": {
    "altair": "6.0.0",
    "duckdb": "1.4.4",
    "loro": "1.10.3",
    "nbformat": "5.10.4",
    "openai": "2.20.0",
    "polars": "1.38.1",
    "pyarrow": "23.0.0",
    "ruff": "0.15.1",
    "sqlglot": "28.10.1"
  },
  "Experimental Flags": {
    "storage_inspector": true,
    "multi_column": true,
    "cache_panel": true
  }
}

Code to reproduce

# /// script
# requires-python = ">=3.13"
# dependencies = [
#     "marimo",
# ]
# ///
import marimo

__generated_with = "0.19.11"
app = marimo.App(auto_download=["ipynb"])


@app.cell
def _():
    import marimo as mo

    return (mo,)


@app.cell
def _():
    svg_content = """\
    <svg width="60" height="60">
      <circle cx="30" cy="30" r="30" fill="orange" />
      <defs>
        <circle id="myCircle" cx="0" cy="0" r="10" fill="green" />
      </defs>
      <use href="#myCircle" x="20" y="20" />
      <use href="#myCircle" x="40" y="40" />
    </svg>
    """
    return (svg_content,)


@app.cell
def _(mo, svg_content):
    mo.Html(svg_content)
    return


@app.cell
def _(svg_content):
    class SvgClass:
        def __init__(self, text):
            self.text = text

        def _mime_(self):
            return "image/svg+xml", self.text


    SvgClass(svg_content)
    return


if __name__ == "__main__":
    app.run()

[daizutabi]

The root cause appears to be the DOMPurify sanitization library stripping the <use> tag and xlink:href/href attributes by default, as they can sometimes be associated with security risks.

I've implemented a change in frontend/src/plugins/core/sanitize.ts to explicitly allow these elements and attributes:

export function sanitizeHtml(html: string) {
  const sanitizationOptions: Config = {
    // ...
    ADD_TAGS: ["use"],
    ADD_ATTR: ["xlink:href", "href"],
    // ...
  };
  return DOMPurify.sanitize(html, sanitizationOptions);
}

This change should resolve the rendering problem for SVGs containing <use> elements. I've tested this locally and it seems to work.

While this change fixes the rendering, I'm not entirely confident if this is the most secure approach for all possible use cases in marimo.