Download and use artifacts

Export from the Studio

Set up the artifact, inspect the preview, then use the tool's export control.

Capability matrix lists the same exports with their Browser API actions.

To export from Design Lab, the layered composition tool, with the Browser API (window.glyphfield.studio):

const studio = window.glyphfield.studio;
if (studio.activeTool() !== 'material') throw new Error('Open Design Lab first.');

const artifact = await studio.invoke('design.export', {
  format: 'gif',
  mode: 'standard',
  download: false,
});

if (!(artifact.blob instanceof Blob) || artifact.blob.size === 0) {
  throw new Error('Empty GIF export.');
}

studio.download(artifact);

Run one browser export at a time. Exports share the renderer and encoder, and Design Lab rejects a new export or capture while one is running. Check each file before starting the next export.

Design Lab exports the active artboard. PNG and JPG freeze the shader frame that is visible when the export starts. GIF and MP4 sample motion from the current frame and restore that paused pose afterward. These exports do not add captured-frame assets to IndexedDB or restart playback. Use design.frame.pause to pause without storing anything, and design.frame.capture when the editable source should include a lasting PNG of the shader's appearance. When a resource is missing, or a motion export of Fluid Energy is requested, the export fails with an error and nothing is substituted.

Download raw SVG from the API

BASE_URL=http://localhost:3012

curl -fsS -X POST "$BASE_URL/api/generate" \
  -H 'Content-Type: application/json' \
  -d '{
    "kind": "template",
    "template": "slides",
    "slideLayout": "statement",
    "texture": "white",
    "title": "One identity. Every surface.",
    "identity": { "preset": "gt" },
    "output": "raw"
  }' \
  -o gt-statement-slide.svg

test -s gt-statement-slide.svg

Set BASE_URL to your deployment. http://localhost:3012 is the local development server. A raw response is image/svg+xml with a Content-Disposition header that names the file.

Extract SVG from a JSON envelope

Without output: "raw", template and background requests return a JSON envelope: { artifact: { content, filename, height, mimeType, width }, schemaVersion: 1 }.

curl -fsS -X POST "$BASE_URL/api/generate" \
  -H 'Content-Type: application/json' \
  -d @request.json \
  -o response.json

jq -r '.artifact.content' response.json > artifact.svg
jq '.artifact | { filename, mimeType, width, height }' response.json
test -s artifact.svg

Use SVG

The commands above write the file into the current directory. Copy it into your application's public asset directory before referencing it from HTML or CSS. The example file is generated output and does not ship with Glyphfield.

mkdir -p public/brand
cp gt-statement-slide.svg public/brand/gt-statement-slide.svg

<img src="/brand/gt-statement-slide.svg" alt="General Translation statement slide" />

.launch-hero {
  background: center / cover no-repeat url('/brand/launch-background.svg');
}

Inline an SVG in a page only when you trust it and need its internal styling or scripting.

Use stills and motion

• Use PNG for transparency and crisp flat graphics.
• Use JPG for smaller opaque images.
• Use GIF when the destination requires it. Check the dimensions, palette banding, file size and the point where it loops.
• Use MP4 for longer or higher-fidelity motion. Add captions or a transcript where needed, and check the audio.
• Respect prefers-reduced-motion and the platform's autoplay rules.

Use JSON and briefs

An element brief is a production specification in JSON, and it contains no image. Store it next to the implementation when you need to trace the work back to its source. Treat a CanvasDocument or other tool source as editable state. Open or apply it in a compatible Studio version instead of rendering it from guessed fields.

Handoff bundle

A complete handoff contains:

1. The rendered artifacts.
2. The exact editable source or the named Design Lab save.
3. The identity ID and revision.
4. Authorized asset and font files that the source does not embed.
5. The output settings and the expected loop and audio behavior.
6. License and attribution notes where required.

With this bundle, a person or an agent can regenerate the work without layers shifting or shader timing changing.