feat(network): add SVG export

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx

@@ -643,6 +643,42 @@ function DiagramEditorInner() {
     }
   }, [nodes, name])
 
+  const handleExportSvg = useCallback(async () => {
+    if (nodes.length === 0) {
+      toast.warning('Add some devices to the diagram before exporting')
+      return
+    }
+    try {
+      const { toSvg } = await import('html-to-image')
+      const IMAGE_WIDTH = 1920
+      const IMAGE_HEIGHT = 1080
+      const bounds = getNodesBounds(nodes)
+      const viewport = getViewportForBounds(bounds, IMAGE_WIDTH, IMAGE_HEIGHT, 0.5, 2, 0.15)
+      const flowEl = document.querySelector('.react-flow__viewport') as HTMLElement | null
+      if (!flowEl) {
+        toast.error('Could not find canvas to export')
+        return
+      }
+      const dataUrl = await toSvg(flowEl, {
+        backgroundColor: '#16181f',
+        width: IMAGE_WIDTH,
+        height: IMAGE_HEIGHT,
+        style: {
+          width: `${IMAGE_WIDTH}px`,
+          height: `${IMAGE_HEIGHT}px`,
+          transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
+          transformOrigin: 'top left',
+        },
+      })
+      const a = document.createElement('a')
+      a.download = `${name.replace(/[^a-zA-Z0-9-_ ]/g, '') || 'diagram'}.svg`
+      a.href = dataUrl
+      a.click()
+    } catch {
+      toast.error('SVG export failed')
+    }
+  }, [nodes, name])
+
   const handleExportPdf = useCallback(() => {
     window.print()
   }, [])
@@ -683,6 +719,7 @@ function DiagramEditorInner() {
         onNameChange={(n: string) => { setName(n); setIsDirty(true) }}
         onSave={handleSave}
         onExportPng={handleExportPng}
+        onExportSvg={handleExportSvg}
         onExportPdf={handleExportPdf}
         onExportJson={handleExportJson}
         onUndo={undo}