Guide

Output modes

Control inline SVG, base64 img, or PNG output with the output attribute or frontmatter defaults.

Control the generated node type with the output= attr or a frontmatter default:

Mode	Generated node	Notes
`svg` (default)	inline `<svg>`	Supports CSS `currentColor` theming
`img`	`<img src="data:image/svg+xml;base64,…">`	Portable single element
`png`	`<img src="data:image/png;base64,…">`	Requires the `canvas` peer dep

Per-directive

::vl{width="400" height="240" output="img"}
```
{ "mark": "bar", … }
```
::

import vega from 'comark-vega'

const plugins = [
  vega({
    vega: {
      output: 'svg',
    },
  }),
]

Frontmatter values override plugin defaults. Per-directive attrs override both.

The client <Vega> component uses SVG at runtime regardless of the output hint. The hint applies to SSR-capable and parse-time SVG paths.

Inline SVG directives

Parse-time chart rendering with ::vl, ::vg, ::chart, and mark shortcuts — no runtime component required.

Frontmatter

Global vega defaults in document frontmatter and plugin factory options.