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: the global mode for text without its own textOverflow: 'change-font-size' (default, shrinks the font to fit), 'resize' (keeps the authored size and natural height), 'ellipsis' (cuts at the box with "…") or 'fit' (fits every text within its size bounds). An element's own textOverflow, maxLines and size bounds apply either way; see Text Sizing.
  • textSplitAllowed: boolean (default false); whether fitting text may break a word mid-word instead of shrinking.
  • elementHook({ dom, element }): post-process each element's node before it is serialized.
  • fetchGuard: (url) => boolean | Promise<boolean>, called for every URL the export downloads to inline (image, SVG, clip and mask sources, font files), including each redirect hop in Node (a browser shows it only the first and final URL); return false to reject it. It replaces the default check, which in Node refuses only cloud-metadata endpoints.

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