Skip to main content

Dynamic SVG (DSVG)

DSVG is an SVG-compatible document format for dynamic graphics. It adds:

  1. Yoga flexbox layout on SVG <g> groups
  2. Mustache variable interpolation in attributes and text
  3. Deterministic OpenType text measurement for flex <text> children

A DSVG file remains valid SVG/XML. A compiler resolves templates, measures text from supplied fonts, applies layout, and emits ordinary static SVG.

Current version​

Minimal example​

<svg xmlns="http://www.w3.org/2000/svg" data-dsvg-version="0.1" width="300" height="100">
  <g
    data-dsvg-layout="flex"
    data-dsvg-gap="16"
    data-dsvg-width="300"
    data-dsvg-height="100"
  >
    <rect width="40" height="40" fill="{{accent}}" />
    <rect width="40" height="40" fill="#33cc66" />
  </g>
</svg>
import { compileDsvg } from '@deckify/dsvg';

const { svg } = await compileDsvg(source, {
  variables: { accent: '#3366ff' },
});

Compiled output:

Next steps​