# Formats and portability Learn how each Glyphfield output format behaves, including SVG, PNG, JPG, GIF, MP4, PDF, JSON and Lottie, and what a file needs to stay portable. ## SVG [#svg] Templates and backgrounds generated over HTTP are standalone UTF-8 SVG documents. The expression tools (OpenGraph, Terminal card, Partnership lockup, Blog cover and Slide templates) and Moodboard also export standalone SVG. * The dimensions are fixed on the root `` element. * Brand fonts, bundled marks and authorized data-URL images are embedded in the file. * Filters and patterns are deterministic and travel with the file. * Template text stays text and renders in the embedded brand font. * The file does not load anything from the Glyphfield deployment. Keep SVG as the master copy of an API artifact and rasterize it for each destination. ## PNG [#png] PNG is a lossless still. It keeps transparency where the composition has it, and it suits social images, slide backgrounds, documentation, product surfaces and archived proofs. A Design Lab PNG renders the complete layer stack: background, shaders at the selected frame, converter effects, text effects, assets, marks, stickers, opacity, blend modes and transforms. Design Lab, the layered composition tool, freezes the shader frame that is visible on screen and then composes the PNG or JPG at the selected output size. The export leaves playback paused and stores no shader-frame assets. To keep an editable checkpoint of the shader's appearance as well as the rendered file, capture the shader frame explicitly with **Capture shader frame** and keep the portable CanvasDocument source. The expression tools export PNG at twice the page size, capped at 4800 px on the longest edge. ## JPG [#jpg] JPG is an opaque Design Lab still. Transparent areas are composited over the artboard background before encoding. Use it when file size matters more than transparency or exact flat-color edges. ## GIF [#gif] GIF stores motion with a limited color palette and has no audio channel. Glyphfield reserves palette entries for important brand and text colors. Design Lab builds one palette for the whole GIF, or a palette per frame at **Best** quality. Animation and Lottie build one palette for the whole GIF, and Lottie GIFs run at 25 FPS. Design Lab has two loop modes. Animation and Lottie record the clip as it plays. * **Raw motion** records the requested interval without correcting the loop point. Use it for motion that already repeats or for an intended hard cut. * **Blended loop** records extra frames past the end, blends them toward the frames recorded at the start, and checks that the end meets the start. The GIF loop flag only repeats playback. It does not make the last frame match the first, so inspect the actual loop point. ## MP4 [#mp4] MP4 is video encoded in the browser, with better color and smaller files for motion than GIF. Glyphfield tries the H.264 codec first and then the other codecs the browser can encode. Design Lab encodes either the standard composition or the shader-sequence cut. Animation can mix overlapping audio clips into the video. Lottie MP4s run at 30 FPS. Codec support depends on the browser. When no MP4 video codec is available, the export fails with "This browser cannot encode an MP4 video." Keep the source and report the limitation. Glyphfield does not substitute GIF. Design Lab GIF and MP4 exports sample motion from the current frame and restore that paused pose afterward, without storing captured-frame assets. A saved PNG keeps the appearance of a frame but not the simulation history behind it. Fluid Energy is a stateful simulation, so it supports still export, but its motion cannot be exported from a timestamp. ## PDF [#pdf] The Brand book prints through the browser's print dialog to a paginated PDF of the brand standards, one 16 × 10 in page per sheet. The PDF is a snapshot of the pages built from the current identity and is not editable source, so export it again after changing the identity. Slide templates export a PDF deck directly, with each slide embedded as an image at twice its size. ## JSON and CanvasDocument [#json-and-canvasdocument] JSON can hold: 1. A `BrandIdentity`. 2. An element brief resolved against an identity. 3. An API envelope with embedded SVG. 4. A Studio tool's source configuration. 5. A CanvasDocument scene graph. 6. Raw Lottie JSON. Keep `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 [#lottie] Raw Lottie JSON can be edited, recolored and downloaded. A binary `.lottie` archive stays binary. It can be replayed and downloaded, and it is not presented as expanded JSON. ## Fonts and assets [#fonts-and-assets] Fonts installed in the browser and temporary object URLs do not travel with editable source by themselves. A rendered PNG, JPG, GIF or MP4 contains their visible result, but an editable JSON document can still need the original authorized files. Embedding files as data URLs makes a document larger and more portable. For a lasting handoff, keep: * The editable source or saved design. * The authorized original images and fonts that the source does not embed. * The rendered artifact. * The requested dimensions, frame rate, duration, loop mode and codec. * The attribution and license records for third-party shaders and materials. [Storage and privacy](/docs/artifacts/storage-and-privacy) and [Source format reference](/docs/reference/source-formats) cover storage and source in detail.