SVG Export

Overview

The @polotno/svg-export package converts a Polotno design into an SVG string. It works directly on plain design JSON — no running editor or store instance is required — so you can export a saved design, or export from a page that never mounts the full editor.

The exporter is browser-first: it needs a DOM (DOMParser, canvas text measurement), so it runs best in the browser. It can run server-side in Node under jsdom (see Using in Node), but for pixel-accurate server-side rendering use polotno-node.

Installation

npm install @polotno/svg-export

Basic Usage

Each SVG document holds a single page, so pass the page you want to export:

import { jsonToSVG } from '@polotno/svg-export';

const json = store.toJSON();

// export the first page
const svg = await jsonToSVG({ ...json, pages: [json.pages[0]] });

jsonToSVG returns a Promise<string> containing the SVG markup.

API Reference

jsonToSVG(json, options?)

Renders a single-page Polotno design into an SVG string.

Parameters:

• json (required): plain design JSON containing one page.
• options (optional):
  • fontEmbedding — 'inline' (default) embeds the fonts inside the SVG so it renders identically anywhere; 'none' skips embedding for a smaller file.
  • textOverflow — how text taller than its box is handled: 'change-font-size' (default, shrinks the font to fit) or 'resize' (keeps the authored size; SVG never clips).
  • elementHook({ dom, element }) — post-process each element's node before it is serialized.

import { jsonToSVG } from '@polotno/svg-export';

const json = store.toJSON();

const svg = await jsonToSVG(
  { ...json, pages: [json.pages[0]] },
  {
    fontEmbedding: 'inline',
    textOverflow: 'change-font-size',
  }
);

jsonToDOM(json, options?)

Same as jsonToSVG but returns the DOM tree instead of a serialized string.

Exporting multiple pages

jsonToSVG produces one SVG per page. Map over the pages to export them all:

import { jsonToSVG } from '@polotno/svg-export';

const json = store.toJSON();
const svgs = await Promise.all(
  json.pages.map((page) => jsonToSVG({ ...json, pages: [page] }))
);

Using in Node

In Node, run the exporter under jsdom to provide the DOM it needs (DOMParser, canvas text measurement):

import { JSDOM } from 'jsdom';
import { jsonToSVG } from '@polotno/svg-export';

const dom = new JSDOM();
global.document = dom.window.document;
global.window = dom.window;
global.DOMParser = dom.window.DOMParser;

const svg = await jsonToSVG(designJson);

Limitations