Make SVGs horizontally scrollable in HTML page

[pawamoy]

I'm using Rich and Markdown-Exec to add terminal SVGs to my docs dynamically.
The issue is that if I specify a large console width, like 120, then the font size becomes very small because the SVG tries to fit the width of its parent (I think?).

The first SVG has a console width of 150 and the second one 80.

Instead of the SVG fitting the width and reducing font size, I'd like it to always render using the same font size and with an horizontal scroll bar, just like regular code blocks.

Would any of you know how to achieve this 😄?

The SVG is wrapped in a div (I can add an id, or classes, or whatever helps for CSS):

I've tried setting a larger width on the SVG than the parent div, with overflow-x: auto or overflow-x: scroll without success 😕

Shamefully tagging @squidfunk as maybe you'll have an idea 🙈 🙇‍♂️? (I'm using Material for MkDocs)

[pawamoy]

Ah, for this exact use-case, I believe export_html is the solution: this will be rendered as a code block, with the desired horizontal scrolling. Font size will match the rest of the page.

[willmcgugan]

Try setting inline_styles=True

[pawamoy]

Both inline_styles=True and inline_styles=False give the same result.

[pawamoy]

Issue opened as #2641

[pawamoy]

I also had to tweak the colors because blue and yellow looked bad on both light and dark themes: #7faeff instead of blue and #afaf72 instead of yellow. Happy to get better suggestions as I'm bad with colors 😆

[pawamoy]

Final code:

with open(os.devnull, "w") as devnull:
    console = Console(record=True, width=150, file=devnull)
    console.print(report, markup=True, highlight=False)
print(console.export_html(inline_styles=True, code_format="<pre><code>{code}</code></pre>"))