DOCSEARCHbyAlgolia
Submit Docs

VGG (VeryGoodGraphics)

website·Indexed 31 days ago

https://docs.verygoodgraphics.com/

VGG is a next-generation vector graphics project providing a set of JSON-based specifications (VGG Specs) for vector geometry. The documentation covers specifications for paths, vector networks, symbol masters, text, and shapes, as well as implementation details for the vgg_runtime.

Tokens
31.6K
Snippets
144
Records
313
Agent score
49%

What's inside VGG

  1. Overview of VGG File Format options

    VGG supports two file formats for fusing JSON files into a single entity:

    1. Form 1 (Zip of JSONs): A straightforward ZIP archive of JSONs and assets.
    2. Form 2 (Streaming binary blob): A more compact format optimized for file size and network streaming (currently in design phase, similar to the Kiwi format used by Figma).

  2. Introduction to VGG Specs

    VGG Specs is a set of JSON-based specifications for next-generation vector graphics, primarily targeting user interfaces. It supports advanced UI effects such as gradients, shadows, blurs, and masks. The specification is designed to be open, human-readable, scriptable, compact, and extensible, acting as a super-set compatible with SVG and design tools like Figma and Adobe Illustrator.

  3. Overview of VGG Runtime and Specifications

    VGG Runtime is the official implementation of VGG Specs. It currently implements features defined in the VGG Vector Graphics Spec and the VGG Layout Spec. The runtime source code is available on GitHub.
    # VGG Runtime Repository
https://github.com/verygoodgraphics/vgg_runtime

  4. Overview of VeryGoodGraphics (VGG)

    VeryGoodGraphics (VGG) is a next-generation vector graphics system designed for cross-platform user interface development. It functions as both a vector graphics format (comparable to SVG) and a vectorized UI framework (comparable to Flutter). VGG implements a 'Design-as-Code' paradigm, allowing developers to use design drafts as vector graphics resources to eliminate the manual effort of creating pixel-perfect UI matches from design drafts.

  5. Understand the Frame object in Vector Graphics

    A frame is a specialized object that serves two purposes: it is a renderable object and a container for child objects. Unlike a group (which is merely a collection of objects), a frame is an object itself. This distinction is critical for styling: fills applied to a frame affect the frame itself, whereas fills applied to a group affect all of its children.

  6. Understand the VGG Contributor Reward Program (CRP)

    The VGG Contributor Reward Program (CRP) is designed for the VGG Runtime project. Because VGG Runtime uses a conditionally free license rather than a standard open-source license, the CRP shares profits generated from the VGG License with recognized community contributors to incentivize and reward their work on the commercial project.

  7. Path object overview and properties

    A Path object represents a vector geometry formed by individual subpaths combined via boolean operations. It contains comprehensive properties for spatial transformation, visual styling, and masking behavior.

  9. Understand the VGG Layout Specification obj object

    The obj object in the VGG Layout Specification is used to describe the layout information of an element. Unlike the VGG Vector Graphics Specification, the Layout Specification does not contain hierarchical relationships between objects.

  10. VGG Specs Component Overview

    The VGG Specs ecosystem consists of several specialized specifications, each with associated JSON schemas for validation:
    // VGG File Spec: Defines the file structure
// VGG Vector Graphics Spec: Schema at https://docs.verygoodgraphics.com/schemas/vectorgraphics.schema.json
// VGG Layout Spec: Schema at https://docs.verygoodgraphics.com/schemas/layout.schema.json

  11. VGG Vector Graphics Specification Overview

    The VGG Vector Graphics Specification is a JSON-based specification for describing vector graphics.

    Coordinate System:

    • The X-axis increases to the right.
    • The Y-axis increases upwards.
    • Normalized Coordinates: Points are normalized relative to the width and height defined in the bounds property.
    • Non-normalized Coordinates: Points use the same coordinate system as the object bounds.

  12. Understand the Group type in Vector Graphics

    A Group is a container that combines a list of child objects. Unlike a Frame, a Group is not a renderable object itself. A key distinction is that properties applied to a Group, such as fills, affect all of its children, whereas properties applied to a Frame affect only the Frame itself.