[Python] Altair: Inline SVG Rendering while removing external Dependencies in Jupyter Notebook

I'm trying to render an Altair chart as an inline SVG in a Jupyter Notebook while removing external dependencies. My current approaches are falling short:

• Using altair.renderers.set_embed_options(renderer="svg") doesn't remove external dependencies
• Using altair.renderers.enable(renderer="svg", bundle_data=True) removes the external dependencies, but embeds the plot as an <img> tag instead of inline SVG

I specifically need the SVG to be inlined because I'm using custom SVG patterns in my chart encoding, which requires access to the raw SVG markup.

Prior cell

%%HTML
<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
<defs>
<pattern id="dotspattern" x="10" y="10" width="159.002264" height="183.6" patternUnits="userSpaceOnUse" patternTransform="scale(0.2)">
<circle id="base-dot" cx="79.501132" cy="91.8" r="44.5459745" fill="#753bbd"/>
<use xlink:href="#base-dot" transform="translate(-79.501132,45.9)" />
<use xlink:href="#base-dot" transform="translate(-79.501132,-45.9)" />
<use xlink:href="#base-dot" transform="translate(79.501132,45.9)" />
<use xlink:href="#base-dot" transform="translate(79.501132,-45.9)" />
<use xlink:href="#base-dot" transform="translate(0,91.8)" />
<use xlink:href="#base-dot" transform="translate(0,-91.8)" />
</pattern>
</defs>
</svg>



Python code cell

import altair as alt
import pandas as pd

data = pd.DataFrame({
'category': ["Purple"],
'value': [100],
'pattern': ["pattern_1"]
})

chart = alt.Chart(data, title="Pattern", width=600,
height=400).mark_bar(stroke=None).encode(
x=alt.X("category:N", sort=data['category']),
y=alt.Y("value:Q", axis=alt.Axis(title=None)),
fill=alt.Fill("pattern:N",
scale=alt.Scale(range=["url(#dotspattern)"]),
legend=None))
alt.renderers.set_embed_options(renderer='svg')

chart

Specific Question


How can I render the Altair chart as an inline SVG whilst completely removing external JavaScript dependencies?

What I've Tried

• altair.renderers.set_embed_options(renderer="svg")
• altair.renderers.enable(renderer="svg", bundle_data=True) The bundle_data=True has no effect when used inside set_embed_options

Desired Outcome


An inline SVG rendering of the Altair chart that:

• Includes all pattern definitions
• Has no external dependencies
• Maintains full SVG manipulation capabilities

Environment

• Python: 3.12.4
• Altair: 5.3.0
• Vega-Lite: 5.20.1
• Vega: 5
• Vega-Embed: 6
• Jupyter: 7.2.1

Continue reading...