GlyphfieldDocs
Documentation/System reference

Formats and portability

Understand SVG, PNG, JPG, GIF, MP4, PDF, JSON, Lottie, fonts, assets, loops, and codec boundaries.

Maintained with source

SVG

HTTP-generated templates and backgrounds are standalone UTF-8 SVG documents.

  • Dimensions are fixed on the root SVG.
  • Authorized data-URL images and bundled marks can be embedded.
  • Deterministic filters/patterns travel with the file.
  • Text normally remains text and therefore depends on the documented font stack.
  • The downloaded file does not depend on the Glyphfield deployment.

Keep SVG as the canonical API artifact and rasterize per destination.

PNG

PNG is a lossless browser still. It preserves transparency where the tool supports it and is appropriate for social images, slide backgrounds, documentation, product surfaces, and archival proofs.

Design Lab PNG resolves the complete layer stack: background, shaders at the selected frame, converter effects, text effects, assets, marks, stickers, opacity, blend, and transforms.

JPG

JPG is an opaque Design Lab still. Transparent pixels are composited against the selected canvas background before encoding. Use it when file size matters more than transparency or pixel-perfect flat-color edges.

GIF

GIF is palette-based motion and has no audio channel. Glyphfield protects important brand/text colors and can build a global or per-frame palette depending on the export configuration.

Two loop modes exist:

  • Raw motion records the requested shader or animation interval without seam correction. Use it for already periodic motion or intentional hard cuts.
  • Seamless captures overlap, blends the tail toward recorded head frames, and verifies closure against the seam anchor.

The GIF loop flag only repeats playback; it does not make the last visual state match the first. Inspect the actual seam.

Animated General Translation mark morph
Morph packageGIF · exact frame preparation
Animated General Translation typography deleting and rebuilding
Typography packageGIF · protected text color

MP4

MP4 is browser-encoded video for higher color fidelity and motion efficiency. Design Lab encodes the standard live composition or shader-cut sequence. Animation can mix overlapping audio clips into the exported video.

Codec availability depends on the browser. If MP4 encoding is unavailable, keep the source and report the limitation; do not silently substitute GIF.

PDF

Brand Book uses the browser print/export path to produce a paginated standards document. PDF is a snapshot of the current identity-derived pages, not the editable source. Re-export after changing the identity.

JSON and CanvasDocument

JSON may represent:

  1. A BrandIdentity.
  2. An identity-resolved element brief.
  3. An API artifact envelope with embedded SVG.
  4. A Studio tool's source configuration.
  5. A CanvasDocument scene graph.
  6. Raw Lottie JSON.

Retain schemaVersion, tool metadata, stable IDs, asset references, ordering, and unknown fields. Design Lab's current source is CanvasDocument schema 2 with Design Lab metadata source version 4.

Lottie

Raw Lottie JSON can be edited, recolored, and downloaded. A binary .lottie archive remains binary and can be replayed/downloaded without being misrepresented as expanded JSON.

Fonts and assets

Browser-local fonts and object URLs are not automatically portable. A rendered PNG/JPG/GIF/MP4 captures their visible result, but an editable JSON document may still require the original authorized bytes. Embedded data URLs increase document size but improve portability.

For durable handoff, preserve:

  • The editable source or saved design.
  • Authorized original images and fonts not embedded in source.
  • The rendered artifact.
  • The requested dimensions, frame rate, duration, loop mode, and codec expectations.
  • Attribution/license records for upstream shader and material sources.

See Storage and privacy and Source formats.

On this page