Request: *.SVG support

[GeorgLegato]

By using either txt2vectorgraphics-script (old one) or my new Vector-Studio-Extension, people can generate many SVG just next to their png, in same folder, same name etc.
So, my request is, to display any SVG graphic in the list as well.
I could add "Edit SVG" on the current selection and send it to internal svg editor. Or people can delete crappy svgs.

1. The gallery is out-of-the-box able to display SVG (at least data-url, should work with file-url as well)
2. Gallery will add <img src="bla.svg"> as element, Vectorstudio will handle background(transparency)-style
3. Today, SVG have no metadata about prompt settings; but the bro png does..
4. I used caption="svg" attribute for each PIL.Image in the gallery preview, so the user can clearly see that it is not the PNG one, sometimes they are damn identically.
   

Further readings:
https://github.com/GeorgLegato/stable-diffusion-webui-vectorstudio

[AlUlkesh]

I added svg to the extensions list. Seems to work fine.

[AlUlkesh]

Well, it seems to work, but there are error messages on the console, from Gradio(?):

Traceback (most recent call last):
  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\gradio\routes.py", line 394, in run_predict
    output = await app.get_blocks().process_api(
  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\gradio\blocks.py", line 1073, in process_api
    inputs = self.preprocess_data(fn_index, inputs, state)
  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\gradio\blocks.py", line 962, in preprocess_data
    processed_input.append(block.preprocess(inputs[i]))
  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\gradio\components.py", line 1594, in preprocess
    im = processing_utils.decode_base64_to_image(x)
  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\gradio\processing_utils.py", line 57, in decode_base64_to_image
    img = Image.open(BytesIO(base64.b64decode(image_encoded)))
  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\PIL\Image.py", line 3283, in open
    raise UnidentifiedImageError(msg)
PIL.UnidentifiedImageError: cannot identify image file <_io.BytesIO object at 0x0000025F7B69E1B0>

[AlUlkesh]

Yes, Gradio uses PIL here:
https://github.com/gradio-app/gradio/blob/6e6121a1ac704c74a4c5d6a543b227c0c1ec60d0/gradio/processing_utils.py#L48

And PIL has no svg support.
https://pillow.readthedocs.io/en/latest/handbook/image-file-formats.html

Funny that it still seems to work...

[GeorgLegato]

yes on preview svg is ok, on processing it fails
you can check my code for controlnet reading svg. (or look into control net repo directly)
in the file controlnet.py is preprocessing snippet doing svg2png based on a certain dpi resolution, which is a settings configuration.
my snippet hooks/replace the preprocess function in gradio.

it is using an ancient svg lib.
recently i have found out three.js is able to render svg as well, maybe better in terms of compatibility of recent versions. and a js version will be much faster than any python lib.

i want to investigate three.js/svg anyways

why need you to process svg, then?

[GeorgLegato]

Well, it seems to work, but there are error messages on the console, from Gradio(?):

Traceback (most recent call last):

  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\gradio\routes.py", line 394, in run_predict

    output = await app.get_blocks().process_api(

  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\gradio\blocks.py", line 1073, in process_api

    inputs = self.preprocess_data(fn_index, inputs, state)

  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\gradio\blocks.py", line 962, in preprocess_data

    processed_input.append(block.preprocess(inputs[i]))

  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\gradio\components.py", line 1594, in preprocess

    im = processing_utils.decode_base64_to_image(x)

  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\gradio\processing_utils.py", line 57, in decode_base64_to_image

    img = Image.open(BytesIO(base64.b64decode(image_encoded)))

  File "c:\tools\Ai\stable-diffusion-webui\venv\lib\site-packages\PIL\Image.py", line 3283, in open

    raise UnidentifiedImageError(msg)

PIL.UnidentifiedImageError: cannot identify image file <_io.BytesIO object at 0x0000025F7B69E1B0>

please use in case of file.name.endswith(.svg) to show info from its origin png instead.

btw, will add prompt info to svg soon

[AlUlkesh]

why need you to process svg, then?

I don't. I think that error is produced by Gradio itself, when I click on the image and Gradio displays it in a larger format.

[GeorgLegato]

why need you to process svg, then?

I don't. I think that error is produced by Gradio itself, when I click on the image and Gradio displays it in a larger format.

it is. gradio itself is fine, beacuse the svg is loaded as dataURL and so passed to the browser like "<img src=data:txt/svg;bas64...", so in fact the browser does the rendering of the svg.
In your code I have seen you try to retrieve "file_info", which is until yet domain of png and it chunks keeping the prompt etc.