🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detecting...

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/4984ba1b66eb06d778db3417f7e3ee9e66c1137d/gradio-5.9.1-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@4984ba1b66eb06d778db3417f7e3ee9e66c1137d#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/4984ba1b66eb06d778db3417f7e3ee9e66c1137d/gradio-client-1.8.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/4984ba1b66eb06d778db3417f7e3ee9e66c1137d/dist/lite.js""></script>

🦄 change detected

This Pull Request includes changes to the following packages.

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Allow displaying SVG images securely in gr.Image and gr.Gallery components

Maintainers or the PR author can modify the PR title to modify this entry.

Ok finally have a relatively clean solution. The basic idea is that for SVG files, we set the FileData.url attribute to be the actual SVG code instead of the URL. This allows SVGs to get rendered securely inside of the <img> tags without needing to change how SVG files are served at all. In the case that the SVG files are uploaded by the user, this happens in the frontend (as that's the only place we can change the FileData payload), whereas in the output case, the FileData payload is set in Image.postprocess() so that's where we make this change.

Tested and works both in SSR and SPA modes, with both kinds of demos:

import gradio as gr

def image_mod(image):
    return image

demo = gr.Interface(
    image_mod,
    gr.Image(type="filepath"),
    "image",
)

if __name__ == "__main__":
    demo.launch()

import gradio as gr

with gr.Blocks() as demo:
    gr.Image("test.svg")

demo.launch(ssr_mode=True)

The example doesn't work?

import gradio as gr

demo = gr.Interface(lambda x:x, "image", "image")

demo.launch()

Yes if you have an Image input you need to set type=filepath to support SVGs as the docs mention. See my example above

thanks for the quick fix! looks like the same have to be put on Gr.Gallery as well?

thanks for the quick fix! looks like the same have to be put on Gr.Gallery as well?

ah yes thank you, I'll fix that

Fixed for gr.Gallery as well, as can be seen with a simple example:

import gradio as gr 

def test(x):
    return x

gr.Interface(test, "gallery", "gallery").launch()

Didn;t seem to work with gallery with the following code:

import gradio as gr

def image_mod(image):
    return [image, image, image]

demo = gr.Interface(
    image_mod,
    gr.Image(type="filepath"),
    gr.Gallery(),
)

if __name__ == "__main__":
    demo.launch()

screen rec below (first with png, then svg)

Didn't seem to work with gallery with the following code:

Hmm can't reproduce this. Are you sure you've pulled the latest and built the frontend?

https://streamable.com/yycb8e

Great thanks @aliabid94!