SVGIcon in Button

Hello dear Bokeh community!

I’m trying to include a svg image into a button using bokeh server 3.2.2. I have a svg file called red.svg, which is stored in the same directory as my main.py file. The code for my examples is:

icn = SVGIcon(name="Test", svg = "red.svg",size=1)
btn = Button(label="", icon=icn,button_type="default", width = 200, margin = (5,5,5,5))

layout = column(btn)
curdoc().add_root(layout)
curdoc().title = "Playground"

When I start the server, the website shows a button, but instead my red circle, the button says:

This page contains the following errors:
error on line 1 at column 1: Document is empty

It doesn’t matter if I use a local svg file or if I use a web adress like svg="https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg"

I tried using Edge instead of Firefox, but with similar results. See the attached screenshot.

Can you tell me how to proper use SVGIcon? What am I missing here?

Screenshot 2023-10-04 102457926×596 23.8 KB

Best regards
Pascal

@pjoerke please provide a complete Minimal Reproducible Example that we can simply copy and paste and run as-is to investigate directly.

Sorry! Here is an example:

from bokeh.io import curdoc
from bokeh.layouts import column
from bokeh.models import Button
from bokeh.models import SVGIcon

icn = SVGIcon(name="Test", svg="https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg" , size = '1.5em')
btn = Button(label="German", icon=icn,button_type="default", width = 200, margin = (5,5,5,5))

layout = column(btn)

curdoc().add_root(layout)
curdoc().title = "Playground"

@pjoerke the actual docs for SVGIcon state that the the value of the svg property is

The SVG definition of an icon.

i.e. I believe you need to provide the actual SVG data itself, not a URL or link to an SVG.

Yes, you are right. With the following code I get a flag as a button icon:

from bokeh.io import curdoc
from bokeh.layouts import column
from bokeh.models import Button
from bokeh.models import SVGIcon

icn = SVGIcon(name="Test", svg="""<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600" viewBox="0 0 5 3">
	<desc>Flag of Germany</desc>
	<rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
	<rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
	<rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
</svg>
              """ , size = '1.5em')
btn = Button(label="German", icon=icn,button_type="default", width = 200, margin = (5,5,5,5))

layout = column(btn)

curdoc().add_root(layout)
curdoc().title = "Playground"

I didn’t think of that… Thanks for your help!

Pascal

Glad that works @pjoerke if you’d care to make a PR to expand/imporove the helpstring, FYI it is here.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.