# How Archify's Export Options Generate PNG, SVG, WebP, and Share Card Formats

> Discover how Archify generates PNG, SVG, WebP, and share card formats client-side using an off-screen HTML5 canvas for quick downloads and clipboard copying.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: how-to-guide
- Published: 2026-08-05

---

**Archify generates all export formats client-side by rendering SVG diagrams to an off-screen HTML5 canvas, then converting the canvas to PNG, WebP, or serialized SVG blobs for immediate download or clipboard copying.**

The **tt-a1i/archify** repository implements a lightweight, browser-based export system that requires no server-side processing. Every diagram exists as an SVG element in the DOM, and four distinct JavaScript functions—`rasterize()`, `rasterizeShareCard()`, `rasterizeRouteShareCard()`, and `rasterizeReachShareCard()`—handle the transformation into downloadable files. This article breaks down the exact implementation in [[`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html)](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html).

## The Core Export Pipeline

All **Archify export options** follow the same three-stage pipeline: select format, rasterize or serialize, then deliver. The entry point is a UI dropdown that invokes `rasterize(format)` with one of three string arguments: `"svg"`, `"png"`, or `"webp"`.

### Step 1: Format Selection and Method Routing

When a user clicks the Export menu, the toolbar triggers `rasterize(format)` at approximately line 1457 in [`template.html`](https://github.com/tt-a1i/archify/blob/main/template.html). The function branches based on the requested output type:

- `"svg"` → Direct XML serialization
- `"png"` or `"webp"` → Canvas rasterization with MIME-specific encoding

This routing happens entirely in the browser. No network request leaves the client.

### Step 2: SVG to Raster Conversion (PNG and WebP)

For **PNG** and **WebP** exports, Archify creates a temporary `<canvas>` element, injects the SVG into an `Image` object, and draws it to the canvas context:

```javascript
// Simplified excerpt from template.html lines ~1470-1485
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = () => {
  ctx.drawImage(img, 0, 0);
  
  // PNG: lossless, no quality parameter
  // WebP: lossy, default quality 0.95
  const mime = format === 'webp' ? 'image/webp' : 'image/png';
  const quality = format === 'webp' ? 0.95 : undefined;
  
  canvas.toBlob((blob) => {
    download(blob, `my-diagram.${format}`);
  }, mime, quality);
};

img.src = 'data:image/svg+xml;base64,' + btoa(svgString);

```

The **`canvas.toBlob()`** API handles the binary encoding. PNG output omits the quality parameter for lossless compression. WebP sets quality to `0.95` for near-lossless visual fidelity at smaller file sizes.

### Step 3: SVG to SVG Serialization

When **`rasterize('svg')`** is called, the pipeline skips canvas creation entirely. The function uses `XMLSerializer` to extract the raw SVG markup:

```javascript
// From template.html lines ~1457-1465
const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svgElement);
const blob = new Blob([svgString], { type: 'image/svg+xml' });
download(blob, 'my-diagram.svg');

```

This preserves the full vector fidelity, including any CSS styles and metadata embedded in the DOM element.

### Step 4: Triggering File Downloads

All export paths converge on the `download(blob, filename)` helper (lines ~1470-1488). This function creates a temporary object URL, attaches it to a dynamically created `<a>` element, sets the HTML5 `download` attribute, and programmatically clicks the link:

```javascript
function download(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);  // Prevent memory leak
}

```

The filename combines the diagram's display name with the appropriate extension: `architecture-diagram.png`, `network-topology.svg`, etc.

## Share Card Export Variants

**Archify share card formats** extend the rasterization pipeline to generate composite images that combine diagram thumbnails with contextual metadata. Three specialized functions handle different sharing scenarios, all located around lines 6020-6070 in [`template.html`](https://github.com/tt-a1i/archify/blob/main/template.html).

### General Share Card

The `rasterizeShareCard(options)` function creates a hidden DOM container, clones the diagram SVG into it, overlays title and status badges, then rasterizes the composite:

```javascript
// Example: Export a default share card
rasterizeShareCard({
  filename: 'my-diagram-share-card.png'
});

```

### Route Share Card

**`rasterizeRouteShareCard()`** generates cards highlighting the shortest authored path between two nodes. This variant injects additional UI elements showing the start node, end node, and hop count before rasterization.

### Reach Share Card

**`rasterizeReachShareCard()`** produces cards visualizing reachability from a designated start node. The function adds a reachability summary badge and color-codes the diagram to show accessible versus inaccessible nodes.

All share card variants use the same canvas-based rasterization as standard PNG exports, outputting files named `<base>-share-card.png`.

## Clipboard Integration

Beyond file downloads, **Archify's export options** support direct clipboard copying. After blob generation, the code uses the **Clipboard API** to write the image data:

```javascript
// From template.html lines ~1190-1210 (PNG example)
navigator.clipboard.write([
  new ClipboardItem({
    'image/png': blob  // or 'image/svg+xml' for SVG exports
  })
]);

```

This enables immediate pasting into documentation tools, chat applications, or presentation software without intermediate file management.

## Complete Export Examples

```javascript
// Standard raster exports
rasterize('png');   // → my-diagram.png (lossless)
rasterize('webp');  // → my-diagram.webp (quality 0.95)
rasterize('svg');   // → my-diagram.svg (vector)

// Share card variants
rasterizeShareCard({ variant: 'route', filename: 'route-card.png' });
rasterizeShareCard({ variant: 'reach', filename: 'reach-card.png' });

// Clipboard copy (alternative to download)
// Automatically invoked when user selects "Copy" instead of "Download"

```

## Key Implementation Files

| File | Purpose |
|------|---------|
| [[`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html)](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) | Core `rasterize()`, share card functions, and download helpers |
| [`archify/test/share-card-export.test.mjs`](https://github.com/tt-a1i/archify/blob/main/archify/test/share-card-export.test.mjs) | Unit tests validating blob generation and filename formatting |
| [[`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html)](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) | Live demonstration of export UI and share card rendering |

## Summary

- **Archify export options** are implemented entirely client-side in [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html)
- **PNG and WebP** use HTML5 canvas rasterization via `ctx.drawImage()` and `canvas.toBlob()`
- **SVG** exports bypass rasterization through `XMLSerializer` for lossless vector output
- **Share cards** composite diagrams with metadata overlays before rasterization, with three variants: general, route, and reach
- **Clipboard copying** uses the modern `navigator.clipboard.write()` API for immediate cross-application pasting
- All exports are self-contained, requiring no server infrastructure

## Frequently Asked Questions

### What image formats does Archify support for export?

Archify supports **PNG**, **WebP**, and **SVG** for standard exports, plus **share card PNGs** with embedded metadata. PNG provides lossless raster output. WebP offers smaller file sizes at quality 0.95. SVG preserves full vector editability.

### How does Archify generate share cards without server-side rendering?

Share cards use a hidden DOM container that clones the diagram SVG and overlays UI elements (titles, route paths, reachability badges). The composite element is drawn to a canvas and converted to PNG using the same `canvas.toBlob()` pipeline as standard raster exports.

### Can I copy exported images directly to the clipboard?

Yes. Archify's export system supports clipboard copying via the **Clipboard API**. After blob generation, the code calls `navigator.clipboard.write()` with a `ClipboardItem` containing the image data, enabling paste into Slack, Notion, PowerPoint, and other applications.

### What is the difference between route and reach share cards?

**Route share cards** (`rasterizeRouteShareCard`) display the shortest authored path between two specific nodes with hop count metadata. **Reach share cards** (`rasterizeReachShareCard`) visualize all nodes accessible from a starting point, with color-coding indicating reachability status. Both extend the base `rasterizeShareCard()` implementation.