Last active
September 28, 2023 14:13
-
-
Save treuille/8b9cbfec270f7cda44c5fc398361b3b1 to your computer and use it in GitHub Desktop.
Workaround: Displaying SVG images in Streamlit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import streamlit as st | |
import base64 | |
import textwrap | |
def render_svg(svg): | |
"""Renders the given svg string.""" | |
b64 = base64.b64encode(svg.encode('utf-8')).decode("utf-8") | |
html = r'<img src="data:image/svg+xml;base64,%s"/>' % b64 | |
st.write(html, unsafe_allow_html=True) | |
def render_svg_example(): | |
svg = """ | |
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> | |
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> | |
</svg> | |
""" | |
st.write('## Rendering an SVG in Streamlit') | |
st.write('### SVG Input') | |
st.code(textwrap.dedent(svg), 'svg') | |
st.write('### SVG Output') | |
render_svg(svg) | |
if __name__ == '__main__': | |
render_svg_example() |
@treuille Nice work.
Thanks, @dariushazimi! 😊
hi, is it possible to display two svg files with the same position in streamlit?
Really helpful, Thanks you so much for sharing!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@Rkubinski : Awesome. Glad you got it to work!!