St.image creates an X axis and the page can be scrolled to the right

st.image with .svg file creates an x axis and the page can be scrolled sideways, how can I prevent this?

xaxis xaxis2

I use use_column width=True, because I want the image to stretch from edge to edge, but without creating this x axis and without such a gap on the right side like in the screenshot.

import streamlit as st

st.set_page_config(layout="wide")

st.image("example.svg", use_column_width=True)

Hi @jozi

According to the Documentation, the width of SVG images should be explicitly set:

Should be set for SVG images, as they have no default image width.

Thus, it is recommended to use the width parameter of st.image.

More details on how here:

Hope this helps!

Thank you for the answer,
so is there a specific width value that would guarantee what I want? Or alternatively, is there another way I could embed a vector on the page that would preserve the quality and still leave the image stretched to full width?

Hi,

A possible approach that you could try is to programmatically determine the width of the browser’s page width so that you can use this width value as an input to the width parameter of st.image. For this you could look into using: GitHub - aghasemi/streamlit_js_eval: A custom Streamlit component to evaluate arbitrary Javascript expressions

Another approach is to use a PNG version and the use container width parameter should work right out of the box (it just has issues with SVG).