add svg metadata loading (#3719)

Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com>

browser_tests/fixtures/ComfyPage.ts

@@ -490,6 +490,7 @@ export class ComfyPage {
 
       const getFileType = (fileName: string) => {
         if (fileName.endsWith('.png')) return 'image/png'
+        if (fileName.endsWith('.svg')) return 'image/svg+xml'
         if (fileName.endsWith('.webp')) return 'image/webp'
         if (fileName.endsWith('.webm')) return 'video/webm'
         if (fileName.endsWith('.json')) return 'application/json'

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -12,7 +12,8 @@ test.describe('Load Workflow in Media', () => {
     'workflow.glb',
     'workflow.mp4',
     'workflow.mov',
-    'workflow.m4v'
+    'workflow.m4v',
+    'workflow.svg'
   ]
   fileNames.forEach(async (fileName) => {
     test(`Load workflow in ${fileName} (drop from filesystem)`, async ({

src/scripts/app.ts

@@ -63,6 +63,7 @@ import { deserialiseAndCreate } from '@/utils/vintageClipboard'
 import { type ComfyApi, PromptExecutionError, api } from './api'
 import { defaultGraph } from './defaultGraph'
 import { pruneWidgets } from './domWidget'
+import { getSvgMetadata } from './metadata/svg'
 import {
   getFlacMetadata,
   getLatentMetadata,
@@ -1310,6 +1311,15 @@ export class ComfyApp {
       } else if (mp4Info.prompt) {
         this.loadApiJson(mp4Info.prompt, fileName)
       }
+    } else if (file.type === 'image/svg+xml' || file.name?.endsWith('.svg')) {
+      const svgInfo = await getSvgMetadata(file)
+      if (svgInfo.workflow) {
+        this.loadGraphData(svgInfo.workflow, true, true, fileName)
+      } else if (svgInfo.prompt) {
+        this.loadApiJson(svgInfo.prompt, fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
     } else if (
       file.type === 'model/gltf-binary' ||
       file.name?.endsWith('.glb')

src/scripts/metadata/svg.ts

@@ -0,0 +1,18 @@
+import { ComfyMetadata } from '@/types/metadataTypes'
+
+export async function getSvgMetadata(file: File): Promise<ComfyMetadata> {
+  const text = await file.text()
+  const metadataMatch =
+    /<metadata>\s*<!\[CDATA\[([\s\S]*?)\]\]>\s*<\/metadata>/i.exec(text)
+
+  if (metadataMatch && metadataMatch[1]) {
+    try {
+      return JSON.parse(metadataMatch[1].trim())
+    } catch (error) {
+      console.error('Error parsing SVG metadata:', error)
+      return {}
+    }
+  }
+
+  return {}
+}