Download and use artifacts

Export from Studio

Configure the artifact, inspect the preview, then use the tool's export action. Design Lab offers PNG, JPG, GIF, and MP4; Animation offers GIF and MP4; Brand Book exposes PDF through print/export; other tools expose the formats listed in the capability matrix.

For a programmatic Design Lab export:

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);

Do not run browser exports concurrently. Wait for one renderer/encoder job and verify it before starting the next.

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

Raw output returns image/svg+xml and a deterministic Content-Disposition filename.

Extract SVG from a JSON envelope

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

Integrate SVG

The command above writes the file into the current working directory. Copy it into your application's public asset directory before referencing it from HTML or CSS; the example asset is generated output and is not bundled 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 only trusted SVG when internal styling or scripting is required.

Integrate 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 dimensions, palette artifacts, file size, and seam.
• Use MP4 for longer or higher-fidelity motion; include captions/transcripts where relevant and verify audio.
• Keep autoplay respectful of prefers-reduced-motion and platform policy.

Use JSON and briefs

Element briefs are production specifications, not images. Store them next to the implementation when traceability matters. CanvasDocument or tool source should be treated as editable state and opened/applied through a compatible Studio version rather than rendered by guessing at fields.

Handoff bundle

A robust handoff contains:

1. Rendered artifact(s).
2. Exact editable source or named Design Lab save.
3. Identity ID/revision.
4. Non-embedded authorized assets/fonts.
5. Output settings and loop/audio expectations.
6. License/attribution notes where required.

This is enough for a person or agent to regenerate the work without shifting layers or losing material timing.