feat: add SVG export option to canvas export modal

Adds an SVG format choice below the Ultra quality option in the
export modal. PNG quality options still drive raster export; the
new SVG button exports a scalable vector via html-to-image toSvg.

Closes #211

ha-relevant: yes

frontend/src/components/modals/ExportModal.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Download, Loader2 } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
-import { exportToPng, EXPORT_QUALITY_OPTIONS, type ExportQuality } from '@/utils/export'
+import { exportToPng, exportToSvg, EXPORT_QUALITY_OPTIONS, type ExportQuality, type ExportFormat } from '@/utils/export'
 
 interface ExportModalProps {
   open: boolean
@@ -12,6 +12,7 @@ interface ExportModalProps {
 
 export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
   const [quality, setQuality] = useState<ExportQuality>('high')
+  const [format, setFormat] = useState<ExportFormat>('png')
   const [exporting, setExporting] = useState(false)
 
   const handleExport = async () => {
@@ -19,7 +20,11 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
     if (!el) return
     setExporting(true)
     try {
-      await exportToPng(el, quality)
+      if (format === 'svg') {
+        await exportToSvg(el)
+      } else {
+        await exportToPng(el, quality)
+      }
       onClose()
     } finally {
       setExporting(false)
@@ -30,7 +35,7 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
     <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
       <DialogContent className="bg-[#161b22] border-border max-w-sm">
         <DialogHeader>
-          <DialogTitle className="text-foreground">Export as PNG</DialogTitle>
+          <DialogTitle className="text-foreground">Export Canvas</DialogTitle>
         </DialogHeader>
 
         <div className="space-y-2 py-2">
@@ -38,10 +43,10 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
             <button
               key={opt.value}
               type="button"
-              onClick={() => setQuality(opt.value)}
+              onClick={() => { setFormat('png'); setQuality(opt.value) }}
               className={[
                 'w-full flex items-center justify-between px-3 py-2.5 rounded-md border text-sm transition-colors',
-                quality === opt.value
+                format === 'png' && quality === opt.value
                   ? 'border-[#00d4ff] bg-[#00d4ff10] text-foreground'
                   : 'border-border bg-[#0d1117] text-muted-foreground hover:border-muted-foreground',
               ].join(' ')}
@@ -50,6 +55,19 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
               <span className="text-xs opacity-70">{opt.hint}</span>
             </button>
           ))}
+          <button
+            type="button"
+            onClick={() => setFormat('svg')}
+            className={[
+              'w-full flex items-center justify-between px-3 py-2.5 rounded-md border text-sm transition-colors',
+              format === 'svg'
+                ? 'border-[#00d4ff] bg-[#00d4ff10] text-foreground'
+                : 'border-border bg-[#0d1117] text-muted-foreground hover:border-muted-foreground',
+            ].join(' ')}
+          >
+            <span className="font-medium">SVG</span>
+            <span className="text-xs opacity-70">vector — scalable, small file</span>
+          </button>
         </div>
 
         <DialogFooter className="gap-2">

frontend/src/components/modals/__tests__/ExportModal.test.tsx

@@ -3,8 +3,10 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import { ExportModal } from '../ExportModal'
 
 const mockExportToPng = vi.fn()
+const mockExportToSvg = vi.fn()
 vi.mock('@/utils/export', () => ({
   exportToPng: (...args: unknown[]) => mockExportToPng(...args),
+  exportToSvg: (...args: unknown[]) => mockExportToSvg(...args),
   EXPORT_QUALITY_OPTIONS: [
     { value: 'standard', label: 'Standard', pixelRatio: 1, hint: '1× — small file' },
     { value: 'high',     label: 'High',     pixelRatio: 2, hint: '2× — recommended' },
@@ -20,6 +22,7 @@ describe('ExportModal', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockExportToPng.mockResolvedValue(undefined)
+    mockExportToSvg.mockResolvedValue(undefined)
   })
 
   it('renders all three quality options', () => {
@@ -49,6 +52,28 @@ describe('ExportModal', () => {
     await waitFor(() => expect(mockExportToPng).toHaveBeenCalledWith(el, 'standard'))
   })
 
+  it('renders an SVG option under the quality options', () => {
+    render(<ExportModal open onClose={onClose} getElement={getElement} />)
+    expect(screen.getByText('SVG')).toBeInTheDocument()
+  })
+
+  it('selects SVG and calls exportToSvg on Download click', async () => {
+    render(<ExportModal open onClose={onClose} getElement={getElement} />)
+    fireEvent.click(screen.getByText('SVG').closest('button')!)
+    expect(screen.getByText('SVG').closest('button')!.className).toContain('border-[#00d4ff]')
+    fireEvent.click(screen.getByRole('button', { name: /download/i }))
+    await waitFor(() => expect(mockExportToSvg).toHaveBeenCalledWith(el))
+    expect(mockExportToPng).not.toHaveBeenCalled()
+  })
+
+  it('switches back to PNG when a quality option is clicked after SVG', () => {
+    render(<ExportModal open onClose={onClose} getElement={getElement} />)
+    fireEvent.click(screen.getByText('SVG').closest('button')!)
+    fireEvent.click(screen.getByText('Ultra').closest('button')!)
+    expect(screen.getByText('Ultra').closest('button')!.className).toContain('border-[#00d4ff]')
+    expect(screen.getByText('SVG').closest('button')!.className).not.toContain('border-[#00d4ff]')
+  })
+
   it('closes after successful export', async () => {
     render(<ExportModal open onClose={onClose} getElement={getElement} />)
     fireEvent.click(screen.getByRole('button', { name: /download/i }))
@@ -69,6 +94,6 @@ describe('ExportModal', () => {
 
   it('does not render when closed', () => {
     render(<ExportModal open={false} onClose={onClose} getElement={getElement} />)
-    expect(screen.queryByText('Export as PNG')).not.toBeInTheDocument()
+    expect(screen.queryByText('Export Canvas')).not.toBeInTheDocument()
   })
 })

frontend/src/utils/__tests__/export.test.ts

@@ -1,8 +1,12 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { exportToPng, EXPORT_QUALITY_OPTIONS } from '../export'
+import { exportToPng, exportToSvg, EXPORT_QUALITY_OPTIONS } from '../export'
 
 const mockToPng = vi.fn()
-vi.mock('html-to-image', () => ({ toPng: (...args: unknown[]) => mockToPng(...args) }))
+const mockToSvg = vi.fn()
+vi.mock('html-to-image', () => ({
+  toPng: (...args: unknown[]) => mockToPng(...args),
+  toSvg: (...args: unknown[]) => mockToSvg(...args),
+}))
 
 describe('exportToPng', () => {
   let el: HTMLElement
@@ -18,6 +22,7 @@ describe('exportToPng', () => {
     )
     appendSpy = vi.spyOn(document.body, 'appendChild').mockImplementation((n) => n)
     mockToPng.mockResolvedValue('data:image/png;base64,abc')
+    mockToSvg.mockResolvedValue('data:image/svg+xml;base64,abc')
   })
 
   afterEach(() => {
@@ -56,6 +61,35 @@ describe('exportToPng', () => {
   })
 })
 
+describe('exportToSvg', () => {
+  let el: HTMLElement
+  let clickSpy: ReturnType<typeof vi.fn>
+  let createSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    el = document.createElement('div')
+    clickSpy = vi.fn()
+    createSpy = vi.spyOn(document, 'createElement').mockReturnValue(
+      Object.assign(document.createElement('a'), { click: clickSpy }) as HTMLAnchorElement
+    )
+    mockToSvg.mockResolvedValue('data:image/svg+xml;base64,abc')
+  })
+
+  afterEach(() => {
+    createSpy.mockRestore()
+  })
+
+  it('calls toSvg with dark background color', async () => {
+    await exportToSvg(el)
+    expect(mockToSvg).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#0d1117' }))
+  })
+
+  it('triggers a download', async () => {
+    await exportToSvg(el)
+    expect(clickSpy).toHaveBeenCalled()
+  })
+})
+
 describe('EXPORT_QUALITY_OPTIONS', () => {
   it('has exactly three options', () => {
     expect(EXPORT_QUALITY_OPTIONS).toHaveLength(3)

frontend/src/utils/export.ts

@@ -1,6 +1,7 @@
-import { toPng } from 'html-to-image'
+import { toPng, toSvg } from 'html-to-image'
 
 export type ExportQuality = 'standard' | 'high' | 'ultra'
+export type ExportFormat = 'png' | 'svg'
 
 export const EXPORT_QUALITY_OPTIONS: { value: ExportQuality; label: string; pixelRatio: number; hint: string }[] = [
   { value: 'standard', label: 'Standard', pixelRatio: 1, hint: '1× — small file' },
@@ -18,8 +19,23 @@ export async function exportToPng(element: HTMLElement, quality: ExportQuality =
     } as Partial<CSSStyleDeclaration>,
   })
 
+  triggerDownload(dataUrl, 'homelable-canvas.png')
+}
+
+export async function exportToSvg(element: HTMLElement): Promise<void> {
+  const dataUrl = await toSvg(element, {
+    backgroundColor: '#0d1117',
+    style: {
+      '--xy-controls-display': 'none',
+    } as Partial<CSSStyleDeclaration>,
+  })
+
+  triggerDownload(dataUrl, 'homelable-canvas.svg')
+}
+
+function triggerDownload(dataUrl: string, filename: string): void {
   const link = document.createElement('a')
-  link.download = 'homelable-canvas.png'
+  link.download = filename
   link.href = dataUrl
   link.click()
 }