Process and convert .svg files in Image

.changeset/pretty-ads-do.md

@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Process and convert .svg files in `Image`

gradio/components/image.py

@@ -147,6 +147,7 @@ def preprocess(
     ) -> np.ndarray | _Image.Image | str | None:
         if payload is None:
             return payload
+        file_path = Path(payload.path)
         if payload.orig_name:
             p = Path(payload.orig_name)
             name = p.stem
@@ -156,7 +157,11 @@ def preprocess(
         else:
             name = "image"
             suffix = "png"
-        im = _Image.open(payload.path)
+
+        if suffix.lower() == "svg":
+            return str(file_path)
+
+        im = _Image.open(file_path)
         with warnings.catch_warnings():
             warnings.simplefilter("ignore")
             im = im.convert(self.image_mode)
@@ -173,6 +178,9 @@ def postprocess(
     ) -> FileData | None:
         if value is None:
             return None
+
+        if isinstance(value, str) and value.lower().endswith(".svg"):
+            return FileData(path=value, orig_name=Path(value).name)
         saved = image_utils.save_image(value, self.GRADIO_CACHE)
         orig_name = Path(saved).name if Path(saved).exists() else None
         return FileData(path=saved, orig_name=orig_name)

js/app/test/image_component_events.spec.ts

@@ -26,6 +26,22 @@ test("Image click-to-upload uploads image successfuly. Clear button dispatches e
 	await page.getByLabel("Remove Image").click();
 	await expect(page.getByLabel("# Clear Events")).toHaveValue("1");
 	await expect(page.getByLabel("# Change Events").first()).toHaveValue("2");
+
+	await Promise.all([
+		uploader.setInputFiles(["./test/files/gradio-logo.svg"]),
+		page.waitForResponse("**/upload?*?*")
+	]);
+
+	await expect(page.getByLabel("# Change Events").first()).toHaveValue("3");
+	await expect(await page.getByLabel("# Upload Events")).toHaveValue("2");
+	await expect(await page.getByLabel("# Change Events Output")).toHaveValue(
+		"2"
+	);
+
+	const SVGdownloadPromise = page.waitForEvent("download");
+	await page.getByLabel("Download").click();
+	const SVGdownload = await SVGdownloadPromise;
+	expect(SVGdownload.suggestedFilename()).toBe("gradio-logo.svg");
 });
 
 test("Image drag-to-upload uploads image successfuly.", async ({ page }) => {