SVG image bug

Using Streamlit
1

Summary

Hi,
I want to display an SVG image with streamlit.image() but it doesn’t work.

Steps to reproduce

Code snippet:

st.image(svg_string)

Expected behavior:

It should show the image.
I can open the SVG just fine in my browser

Actual behavior:

It just show nothing in the app with no error

I must use this to get it working but it pretty ugly :confused: :

def render_svg(svg_string):
    """Renders the given svg string."""
    # Encode as base 64
    b64 = base64.b64encode(svg_string.encode("utf-8")).decode("utf-8")

    # Add some CSS on top
    css = '<p style="text-align:center; display: flex; justify-content: center;">'
    html = f'{css}<img src="data:image/svg+xml;base64,{b64}"/>'

    # Write the HTML
    st.write(html, unsafe_allow_html=True)

Debug info

  • Streamlit version: 1.24.1
  • Python version: 3.11.4
  • Using Poetry
  • OS version: Windows 10 Version 10.0.19045 Build 19045
  • Browser version: firefox version 115.0.2 (64-bit)

Requirements file

pyproject.toml: https://pastebin.com/we6VKhDn

Links

The SVG image

1 Like
2

Hi @Quentin, I was able to reproduce your bug – thanks for sharing all the details. It looks like there is an existing issue related to this Streamlit.image does not accurately display SVGs · Issue #3882 · streamlit/streamlit · GitHub – feel free to add this as another example, and :+1: the issue to get it prioritized higher, but until then the workaround is probably the best option.

3

Thanks !
The issue is from 2 years ago … will it be not fixed ?

4

Since I was the first one to upvote it earlier today, it seems like it’s not a super common issue. If more people are reporting experiencing it, hopefully it will get higher priority from the streamlit team. Or, someone else could contribute a solution to it.

5

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