Unset white background of SVG in Jupyter notebook

[vwkd]

Description

I’ve got a Jupyter notebook with Deno kernel in VSCode that displays an SVG. The SVG has a forced white background which doesn’t play well with dark mode.

Digging through the dev tools shows it’s caused by the following rule targeting the wrapping div. So, it isn't caused by the SVG itself. Not sure if this is caused by Deno, VSCode Jupyter extension or VSCode itself.

.svgContainerStyle svg {
  background-color: white;
}

How can I unset the background color of the SVG?

Steps To Reproduce

1. Open VSCode in dark mode.
2. Create a notebook with Deno kernel.
3. Create a TypeScript cell and execute it.

const svg = `<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" height="400" width="640" text-anchor="middle" font-size="10" font-family="system-ui, sans-serif" fill="currentColor">
<line y2="370" y1="20" x2="70" x1="70" stroke-linecap="square" stroke="currentColor" aria-label="frame" />
<line y2="370" y1="370" x2="620" x1="70" stroke-linecap="square" stroke="currentColor" aria-label="frame" />
<line y2="20" y1="370" x2="620" x1="70" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#4269d0" aria-label="line" />
</svg>`;

const display = {
  [Symbol.for("Jupyter.display")]() {
    return {
      "image/svg+xml": svg,
    };
  },
};

display;

Expected Result

Actual Result

Additional Information

> deno -V
deno 1.40.2
> code -v
1.86.1
31c37ee8f63491495ac49e43b8544550fbae4533
arm64
> jupyter --version
Selected Jupyter core packages...
IPython          : 8.20.0
ipykernel        : 6.29.0
ipywidgets       : 8.1.1
jupyter_client   : 8.6.0
jupyter_core     : 5.7.1
jupyter_server   : not installed
jupyterlab       : not installed
nbclient         : not installed
nbconvert        : not installed
nbformat         : 5.9.2
notebook         : not installed
qtconsole        : not installed
traitlets        : 5.14.1

VSCode extensions

• Jupyter v2024.1.1
• Deno v3.33.3

[Seally]

It's from VS Code, probably from whatever handles SVG rendering. The white background does not appear when rendering the image in JupyterLab.

As for this issue, you should be able to change the presentation of the output by clicking the ... button besides the output pane and changing the presentation:

On my VS Code installation, there are two renderers for image/svg+xml. The "built-in" renderer doesn't seem to add the white background. You may notice that it also lists which plugin handles the rendering.

[vwkd]

Thanks! Using the VS Code Builtin Notebook Output Renderer indeed solves the issue. I opened microsoft/vscode-notebook-renderers#192.