SVG support

[treuille]

Is your feature request related to a problem? Please describe the problem.

I want a way to output svg graphics in Python. I'm not the only one!

Describe the solution you'd like

I would love for st.write(...) to support an existing svg python library like

• svgwrite
• svglib
• CairoSVG
  (Never tried these, so not sure which is good, but we should pick the best / most widely used one.)

Describe alternatives you've considered

We could also look to see if Jupyter supports SVG and which libraries they're using.

[jlequeux]

Hi!
This would be great!
My personal goal is to be able to display SVG + XML images on Streamlit.
It is possible to embed such an image with st.write(html_for_svg, unsafe_allow_html=True) but it require to write HTML code in the html_for_svg variable:
<figure><embed type="image/svg+xml" src="accessible/path/to/image.svg" /></figure>
and to have the svg image somewhere directly accessible, which is not the case by default.

[treuille]

This is a workaround to display SVGs in Streamlit apps now: https://discuss.streamlit.io/t/display-svg/172/5?u=adrien_treuille

[tc87]

Here is an additional forum conversation regarding this enhancement.

[tc87]

A few additional notes from offline conversations:

• It would be great if we could autodetect the format parameter too.
• These should all be viable:

st.image(url_to_svg, format="svg")
st.image(svg_string, format="svg")
st.image(stringio_with_svg, format="svg")  # (So it supports files)

[tvst]

I think TC's approach is the cleanest route eng-wise, and it makes a lot of sense in terms of API too. So I'll flesh out the spec a little more here.

We can talk about whether we want st.write to support SVG strings later on, as that proposal needs a little more thinking.

Proposal

The st.image function signature today looks like this:

    def image(
        self,
        element,
        image,
        caption=None,
        width=None,
        use_column_width=False,
        clamp=False,
        channels="RGB",
        format="JPEG",
    ):

Here are the proposed changes:

• image should accept SVG file-like objects (i.e. BytesIO) as well as SVG strings. (And also arrays of either of those, since st.image lets you specify multiple images).
• If image is a string, we need to detect whether it's a URL or SVG.
• SVG data should be transferred "as is" to the frontend, without being rasterized into PNG or JPG. The frontend then just renders pure SVG normally.
• clamp, channels don't make sense for a vector file format. We should add some text to the docstring explaining that. And we should also consider showing warnings to users when they fill out those fields and the input is SVG.
• format doesn't make sense for SVG because it's actually used to convert a raw image array into either JPG or PNG. So should add some text to format's docstring, explaining that it doesn't apply in this case. In fact we should rename that option, as described in Fix st.image "format" argument #1137 , but that's another story!

[drorata]

Just to make sure, when @tvst refers to the case when the value of image is either URL or SVG, does it also cover the case of a local file of type SVG?

[treuille]

@drorata : I believe that for that case you'd have to first open the file with Python's open() function, then pass it into st.image().

I hope you and your loved ones are safe and well! ✌️