SVG inside Div - Styles not respected

I want to display an SVG using Bokeh. When I do this inside a Div, the font-family is overridden.

For example

from pathlib import Path

from bokeh.models import Div
from bokeh.io import output_file, save

svg = """<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <text x="50" y="50" font-family="Courier">hello</text>
</svg>"""

Path("hello.svg").write_text(svg)

div = Div(text=svg, width=200, height=200)
output_file("output.html")
save(div)

I would expect the output.html to show the SVG text “hello” in Courier - assuming that is available on the system - as is the case for hello.svg. But output.html uses another font-family.

I can fix it by putting the <svg> inside an <iframe>, but is there another way?

I don’t have any immediate answer, so I would suggest making a GitHub Issue with full details. As as aside, issues are fixed all the time. Please always include relevant package version information in questions and issues.

Apologies for not providing all the information above. I have created an issue as you suggested, bokeh/issues/13976. Thank you.

1 Like

Correction: bokeh/bokeh/issues/13981

1 Like