add svg metadata loading (#3719)

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

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 {}
+}