https://github.com/nornagon/flatten-svg

Flatten SVGs into points
https://github.com/nornagon/flatten-svg

Last synced: about 2 months ago
JSON representation

Flatten SVGs into points

• Host: GitHub
• URL: https://github.com/nornagon/flatten-svg
• Owner: nornagon
• Created: 2019-03-15T05:09:33.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T03:21:07.000Z (over 1 year ago)
• Last Synced: 2024-05-14T23:25:15.930Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.67 MB
• Stars: 60
• Watchers: 3
• Forks: 8
• Open Issues: 15
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.

## Example

Input:

```svg

  

    

    

  

```

Usage:

```js

import {flattenSVG} from 'flatten-svg';

const paths = flattenSVG(svgElement);

```

Output:

```js

[

  { 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](https://github.com/svgjs/svgdom) for

use in non-browser environments such as node.js.

```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](https://developer.mozilla.org/en-US/docs/Web/API/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.