# Archify Export Formats: A Complete Guide to PNG, JPEG, WEBP, SVG, WEBM, and Clipboard Output

> Explore Archify's export formats including PNG, JPEG, WEBP, SVG, WEBM video, and clipboard output. Access all formats via a unified API for seamless integration.

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

---

**Archify supports six export formats: PNG, JPEG, WEBP, SVG, WEBM video, and direct PNG clipboard copying, all accessible through a unified export menu API.**

Archify is an open-source diagramming tool built by tt-a1i that lets users export rendered visuals in multiple raster, vector, and media formats. Whether you need a high-resolution image for presentation slides, a scalable vector for print, or an animated video for documentation, Archify's export system handles each format through dedicated generation pipelines in the core codebase.

## Complete List of Archify Supported Export Formats

Archify exposes every export option through a dropdown menu tied to `#btn-export` in [`examples/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/examples/visual-evolution/prototype.html). Each format button carries a `data-format` attribute that determines which pipeline executes when clicked.

### PNG Export

Archify generates PNG files by rasterizing the visible SVG diagram onto an off-screen `<canvas>` element. The canvas then calls `toBlob('image/png')` (or `toDataURL`) to produce a PNG blob, which is downloaded as `*-share-card.png`.

The rasterization logic lives in the export routine that invokes `rasterize('png')` followed by `download(blob, base + '-share-card.png')` at line 932 of [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html).

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

```

### JPEG Export

JPEG generation follows the same canvas rasterization path as PNG, but uses `canvas.toBlob('image/jpeg')`. The MIME type is selected via a conditional check:

```javascript
var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';

```

The resulting blob downloads as `*-share-card.jpeg`. This logic appears at line 933 of [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html).

### WEBP Export

For WEBP output, Archify calls `canvas.toBlob('image/webp')` after rasterization. The format button declares `data-format="webp"` in the UI markup at line 934. On browsers without native WEBP support, Archify automatically falls back to PNG.

### SVG Export

SVG export preserves the diagram's original resolution and theme information by cloning the native `<svg>` element rather than rasterizing. The process in [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html) (lines 1295–1467) performs these steps:

1. Clones the original SVG element
2. Injects required namespace attributes
3. Serializes with `new XMLSerializer().serializeToString(clone)`
4. Creates a `Blob` of type `image/svg+xml`
5. Triggers download as `*-share-card.svg`

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

```

### WEBM Video Export

For animated diagrams, Archify records canvas frames using the **MediaRecorder API**. The pipeline (lines 1502–1727 in [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html)) captures a `video/webm` stream with VP9 or VP8 codecs, assembles frames into a Blob, and downloads the result as `*-share-card.webm`.

Before recording, Archify verifies support via `canRecordMotion()`. The format button at line 937 declares `data-format="webm"`.

```javascript
// Record 6-second WebM animation (if supported)
if (Archify.exportMenu.run('webm')) {
  console.log('Recording WebM animation…');
}

```

### Clipboard PNG Copy

Instead of file download, Archify can place a rasterized PNG directly onto the system clipboard. After canvas rasterization, it constructs a `ClipboardItem` and writes via `navigator.clipboard.write()`:

```javascript
// Copy diagram PNG to clipboard
Archify.exportMenu.run('clip')
  .then(() => console.log('Diagram copied to clipboard'))
  .catch(err => console.error('Clipboard copy failed:', err));

```

This implementation appears at lines 1749–1755 of [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html).

## How Archify's Export Architecture Works

The export system centers on `Archify.exportMenu.run(format)`, a dispatcher that routes format strings to appropriate generators. The architecture follows three layers:

- **UI Layer**: `<button data-format="...">` elements in [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html) (lines 932–937) expose user-facing options
- **Dispatch Layer**: `runExport` selects rasterizer, serializer, or media recorder based on format
- **Generation Layer**: Canvas APIs for raster formats, XMLSerializer for SVG, MediaRecorder for WEBM

Key files implementing this system include:

- [`examples/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/examples/visual-evolution/prototype.html) — export menu UI and core `runExport` implementation
- [`archify/references/viewer-runtime.md`](https://github.com/tt-a1i/archify/blob/main/archify/references/viewer-runtime.md) — API documentation for `Archify.exportMenu`
- `archify/test/share-card-export.test.mjs` — test coverage verifying format generation and receipt metadata
- [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) — base template injecting export menu scripts

## Summary

- **Six export formats**: PNG, JPEG, WEBP raster images; SVG vector; WEBM video; and direct PNG clipboard copy
- **Unified API**: Call `Archify.exportMenu.run(format)` where format is `'png'`, `'jpeg'`, `'webp'`, `'svg'`, `'webm'`, or `'clip'`
- **Automatic fallbacks**: WEBP degrades to PNG on unsupported browsers; `canRecordMotion()` guards WEBM recording
- **Source location**: All export logic resides in [`examples/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/examples/visual-evolution/prototype.html) with tests in `archify/test/share-card-export.test.mjs`

## Frequently Asked Questions

### What is the highest quality export format in Archify?

**SVG provides the highest quality** because it preserves the original vector data without rasterization. Unlike PNG, JPEG, or WEBP, SVG files maintain infinite scalability and retain all theme information from the source diagram. The trade-off is that SVG cannot capture animated content—for motion, WEBM is required.

### Can Archify export without downloading a file?

**Yes, use the clipboard export.** Calling `Archify.exportMenu.run('clip')` places a PNG directly on the system clipboard using the Clipboard API. This enables instant paste into applications like Slack, Figma, or Google Docs without creating temporary files on disk.

### Does Archify support GIF or MP4 animation export?

**No, Archify only supports WEBM for video export.** The MediaRecorder implementation in [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html) (lines 1502–1727) specifically targets `video/webm` with VP9/VP8 codecs. To obtain GIF or MP4, export WEBM and convert using external tools like FFmpeg.

### Why does my WEBP export sometimes save as PNG instead?

**Archify automatically falls back to PNG when WEBP is unsupported.** The browser's canvas implementation determines WEBP availability; if `canvas.toBlob('image/webp')` fails or the browser lacks support, the export pipeline switches to PNG as a safe default. This behavior is controlled by the MIME type conditional at line 933 of [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html).