# Archify Export Formats: Complete Guide to PNG, SVG, WebM, and More

> Explore Archify export formats PNG SVG WebM and more. Discover how each format is generated using browser-native APIs in this comprehensive guide.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: api-reference
- Published: 2026-08-04

---

**Archify supports six export formats—PNG, JPEG, WebP, SVG, WebM, and clipboard PNG—each generated through distinct browser-native APIs including canvas rasterization, SVG serialization, and MediaRecorder streaming.**

The open-source Archify diagramming tool provides a built-in export menu that lets users download rendered diagrams in multiple formats or copy them directly to the clipboard. This guide examines how each **Archify export format** is generated, referencing the actual implementation in the tt-a1i/archify repository.

## Raster Formats: PNG, JPEG, and WebP

Archify generates all three raster formats through canvas-based rasterization of the visible SVG diagram.

### PNG Export

The PNG export pipeline in [`examples/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/examples/visual-evolution/prototype.html) renders the diagram onto an off-screen `<canvas>` element, then calls `toBlob('image/png')` to create a downloadable blob:

```javascript
// From prototype.html line 932
Archify.exportMenu.run('png')
  .then(() => console.log('PNG exported'))
  .catch(err => console.error('Export failed:', err));

```

The resulting file is downloaded with the suffix `-share-card.png`.

### JPEG Export

JPEG generation follows an identical path, substituting the MIME type:

```javascript
// MIME selection logic from prototype.html line 933
var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';

```

The canvas calls `toBlob('image/jpeg')` and delivers a `-share-card.jpeg` file.

### WebP Export with Automatic Fallback

WebP uses `canvas.toBlob('image/webp')` with built-in fallback behavior. When `data-format="webp"` is selected (prototype.html line 934), the same MIME conditional applies. Browsers without WebP support automatically receive PNG instead.

## Vector Format: SVG Export

Archify preserves the original diagram resolution through native SVG serialization rather than rasterization:

1. **Clone** the original `<svg>` element
2. **Inject** required namespace attributes
3. **Serialize** using `new XMLSerializer().serializeToString(clone)`
4. **Create** a Blob of type `image/svg+xml`
5. **Trigger** download as `-share-card.svg`

This logic spans lines 1295–1467 in [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html) and maintains complete theme and styling information.

## Motion Format: WebM Video Export

For animated diagrams, Archify implements the **MediaRecorder API** to capture canvas frames:

```javascript
// Recording initialization from prototype.html lines 1502–1727
if (Archify.exportMenu.run('webm')) {
  console.log('Recording 6‑second WebM animation…');
}

```

The pipeline checks `canRecordMotion()` for API support, negotiates `vp9` or `vp8` codecs, and streams frames into a `video/webm` blob. The export button at line 937 exposes this via `data-format="webm"`.

## Clipboard Export: Copy PNG Without Downloading

Archify enables instant transfer to other applications through the **Clipboard API**:

```javascript
// Clipboard handling from prototype.html lines 1749–1755
Archify.exportMenu.run('clip')
  .then(() => console.log('Diagram copied to clipboard'))
  .catch(err => console.error('Clipboard copy failed:', err));

```

After rasterizing to canvas, Archify creates a `ClipboardItem` with type `image/png` and calls `navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])`.

## Export Menu Architecture

All formats route through a unified dispatch system:

| Component | Location | Purpose |
|-----------|----------|---------|
| Export menu button | [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html) line 932+ | UI trigger with `data-format` attributes |
| `Archify.exportMenu.run(format)` | [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html) | Central dispatcher selecting generation pipeline |
| `rasterize()` helper | Embedded in export logic | Canvas preparation for raster formats |
| SVG serializer | [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html) lines 1295–1467 | XML serialization for vector output |
| Motion recorder | [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html) lines 1502–1727 | MediaRecorder wrapper for WebM |

The `#btn-export` element opens a dropdown where each `<button data-format="…">` maps directly to its generation pipeline.

## Programmatic Export Examples

### Download Native SVG

```javascript
Archify.exportMenu.run('svg')
  .then(() => console.log('SVG downloaded'))
  .catch(err => console.error(err));

```

### Conditional WebM Recording

```javascript
if (Archify.exportMenu.canRecordMotion && Archify.exportMenu.run('webm')) {
  // Animation recording active
}

```

## Export Verification and Testing

The `archify/test/share-card-export.test.mjs` test suite validates each format generation and verifies receipt metadata including file size, format string, and canonical flag. Runtime documentation in [`archify/references/viewer-runtime.md`](https://github.com/tt-a1i/archify/blob/main/archify/references/viewer-runtime.md) specifies the `Archify.exportMenu` API contract.

## Summary

- **PNG, JPEG, WebP**: Canvas rasterization via `toBlob()` with MIME-type selection
- **SVG**: Native XML serialization preserving resolution and styling
- **WebM**: MediaRecorder API with codec negotiation and automatic fallback
- **Clipboard PNG**: ClipboardItem creation for immediate paste workflows
- **All formats**: Unified through `Archify.exportMenu.run()` dispatcher in [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html)

## Frequently Asked Questions

### What image formats does Archify support for static exports?

Archify supports **PNG, JPEG, WebP, and SVG** for static diagram exports. PNG, JPEG, and WebP are generated through HTML5 canvas rasterization, while SVG uses native XML serialization to preserve vector quality. The WebP format automatically falls back to PNG on unsupported browsers.

### How does Archify create animated exports?

Archify records canvas animations using the **MediaRecorder API** to produce **WebM video files**. The implementation at lines 1502–1727 of [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html) collects canvas frames into a `video/webm` stream with VP9 or VP8 codec selection. The recording starts when users select the WebM option from the export dropdown.

### Can Archify copy diagrams directly to the clipboard?

Yes. Archify supports copying a **PNG to the system clipboard** without creating a download file. The clipboard export at lines 1749–1755 creates a `ClipboardItem` with type `image/png` and writes it via `navigator.clipboard.write()`, enabling immediate paste into document editors, messaging apps, or design tools.

### Where is the export functionality implemented in the Archify codebase?

The core export system resides in **[`examples/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/examples/visual-evolution/prototype.html)**, specifically lines 932–937 for the UI buttons, lines 1295–1467 for SVG serialization, and lines 1502–1727 for WebM recording. The `Archify.exportMenu.run()` method serves as the central dispatcher called by all format buttons.