Spec: SVG/PNG Export

Overview

Enable exporting circuit diagrams as high-quality vector (SVG) and raster (PNG) images for use in documentation, presentations, academic papers, and web content.

Motivation

Users need to include circuit diagrams in reports, theses, presentations, and websites. Currently the only option is screenshots, which are low quality, fixed resolution, and include UI chrome. Proper SVG/PNG export produces publication-quality output.

Requirements

Functional Requirements

1. SVG Export: Lossless vector export preserving all visual detail.
2. PNG Export: Raster export at configurable resolution (72–600 DPI).
3. Export Scope: Export entire circuit, visible viewport, or selected components only.
4. Background Options: White, transparent (PNG), or custom color background.
5. Padding/Margin: Configurable margin around the circuit content.
6. Wire Styles: Preserve wire colors, thickness, and junction dots.
7. Component Rendering: Full component shapes, labels, pin names, and annotations.
8. Signal State Export: Option to include current simulation signal states (colored wires).
9. Layer Control: Toggle visibility of grid, alignment guides, and annotations in export.
10. Batch Export: Export multiple circuit files at once via command line or dialog.
11. Clipboard Copy: Copy as image to system clipboard for quick paste into other apps.
12. Dark/Light Mode: Export in light mode regardless of current app theme (or match theme).

Non-Functional Requirements

• SVG files are clean, human-readable, and editable in Inkscape/Illustrator.
• SVG uses proper text elements (not paths) for labels.
• PNG supports transparency (alpha channel).
• Export handles circuits up to 10000×10000 canvas units without memory issues.
• Export completes in under 3 seconds for typical circuits.

Design

Export Pipeline

Circuit Model
    → Determine bounds (all components + margin)
    → Configure canvas (size, background, DPI)
    → Render components (using existing ShapeRenderer logic)
    → Render wires and junctions
    → Render annotations and labels
    → Output to format (SVG writer or PNG rasterizer)

SVG Structure

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <style>/* component styles */</style>
  </defs>
  <g id="wires">
    <polyline points="..." class="wire" />
  </g>
  <g id="components">
    <g id="comp-and-1" transform="translate(100,50)">
      <path d="..." class="gate-body" />
      <text x="..." y="...">AND</text>
    </g>
  </g>
  <g id="annotations">
    <text x="..." y="...">Label</text>
  </g>
</svg>

Integration with Win2D

The existing ComponentRenderer and WireRenderer draw to a Win2D canvas. For export:

• SVG: Implement a parallel SVG render target that translates draw calls to SVG elements.
• PNG: Render to an offscreen Win2D bitmap at the desired DPI, then encode to PNG.

Export Dialog

┌─────────────────────────────────┐
│ Export Image                     │
├─────────────────────────────────┤
│ Format: ○ SVG  ● PNG            │
│ Scope: ○ Full Circuit           │
│        ○ Viewport Only          │
│        ○ Selection Only         │
│                                 │
│ PNG Options:                    │
│   DPI: [300 ▼]                  │
│   Background: ○ White ○ Transparent │
│                                 │
│ Include:                        │
│   [✓] Component labels         │
│   [✓] Pin names                │
│   [ ] Grid                     │
│   [✓] Annotations             │
│   [ ] Signal states (colors)   │
│                                 │
│ Margin: [20px]                  │
│                                 │
│ [Preview]     [Export] [Cancel] │
└─────────────────────────────────┘

Implementation Tasks

1. Create DigitalWorks.Core/Export/ImageExport/ namespace.
2. Implement circuit bounds calculation with configurable margin.
3. Implement SVG render target (translates draw calls to SVG elements).
4. Implement SVG text rendering for labels and annotations.
5. Implement PNG export via offscreen Win2D bitmap rendering.
6. Create export dialog with format options and preview.
7. Implement scope selection (full, viewport, selection).
8. Implement layer toggle (grid, annotations, signal colors).
9. Add "Copy as Image" to clipboard.
10. Add menu items (File → Export → SVG/PNG) and keyboard shortcut.
11. Implement batch export for command-line usage.

Risks & Open Questions

• Should SVG export use the same shape definitions (JSON) or re-render from scratch?
• How to handle custom fonts that may not be available on the viewer's system?
• PDF export: should this be a separate feature or bundled with PNG/SVG?
• Maximum practical PNG size before memory becomes an issue?

Priority

Medium — Essential for professional and academic usage.