flatten-svg

flatten-svg

flatten-svg normalizes SVG shape data into a simplified line segment form suitable for, say, a plotter. All shapes are reduced to line segments, accurate to within a configurable error margin.

Example

Input:

<svg>
  <g transform="translate(10 10)">
    <rect x="0" y="0" width="30" height="10" />
    <path d="M0 0 l10 0 l0 10 l-10 0 Z" />
  </g>
</svg>

Usage:

import {flattenSVG} from 'flatten-svg';

const paths = flattenSVG(svgElement);

Output:

[
  { points: [[10, 10], [40, 10], [40, 20], [10, 20], [10, 10]] },
  { points: [[10, 10], [20, 10], [20, 20], [10, 20], [10, 10]] }
]

Non-browser environments

flatten-svg is compatible with svgdom for use in non-browser environments such as node.js.

import {flattenSVG} from 'flatten-svg';
import {Window} from 'svgdom';
import {readFileSync} from 'fs';

const window = new Window
window.document.documentElement.innerHTML = readFileSync('test.svg')
const paths = flattenSVG(window.document.documentElement)

API

flattenSVG(svgElement[, options])

• svgElement SVGSVGElement - SVG to flatten.
• options Object (optional)
  • maxError number - maximum deviation from true shape. Defaults to 0.1.

Returns Line[]

Line

Properties:

• points ([number, number] & {x: number, y: number})[] - list of points on the line
• stroke ?string - if present, the stroke property of the line

Points on the line are two-element arrays ([x, y]), but also have .x and .y properties.