flatten-svg

`flatten-svg` normalizes SVG shape data into a simplified line segment form suitable for, say, a [plotter](https://axidraw.com/). All shapes are reduced to line segments, accurate to within a configurable error margin.

Usage no npm install needed!

<script type="module">
  import flattenSvg from 'https://cdn.skypack.dev/flatten-svg';
</script>

README

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.