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