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/__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()
   })
 })