Skip to content

API

ts
import { outlineSvg, outlinePathData } from 'unstroke';

const filled = outlineSvg(svgSource);                       // whole document
const thin = outlineSvg(svgSource, { strokeWidth: 1.5 });   // override the width
const d = outlinePathData('M3 13h4', { strokeWidth: 2, linecap: 'round' });

outlineSvg returns a new SVG string with the original root attributes (viewBox, width, class and so on), a fill attribute and a single path. The stroke-related attributes are dropped, since there is no stroke any more.

outlinePathData takes raw path data and returns the outlined path data as a string. There's no document to read defaults from here, so you have to pass strokeWidth, and the cap and join style if you want anything other than butt and miter.

Both functions take the same options object. If you need the geometry rather than the markup, there's a lower-level API for that. The functions on this page, the options, the warnings and the CLI are the stable API and follow semver; the lower-level exports can change in a minor release.

If the input uses something a filled path can't reproduce, a dashed stroke or a <text> element for example, outlineSvg still returns a result and tells you about it through onWarning. Pass strict: true to get an UnsupportedSvgError instead. The warnings section lists what gets reported.