svg-path-simplify 0.2.7 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -5
- package/dist/svg-path-simplify.esm.js +2787 -2767
- package/dist/svg-path-simplify.esm.min.js +5 -7
- package/dist/svg-path-simplify.js +2787 -2767
- package/dist/svg-path-simplify.min.js +5 -7
- package/dist/svg-path-simplify.pathdata.esm.js +5123 -0
- package/dist/svg-path-simplify.pathdata.esm.min.js +9 -0
- package/dist/svg-path-simplify.worker.js +1 -36
- package/index.html +209 -158
- package/package.json +1 -1
- package/src/detect_input.js +30 -3
- package/src/index-pathdata.js +6 -0
- package/src/pathData_simplify_cubic_extrapolate.js +3 -2
- package/src/pathSimplify-main.js +131 -66
- package/src/pathSimplify-only-pathdata.js +274 -0
- package/src/poly-fit-curve-schneider.js +266 -175
- package/src/simplify_poly_RDP.js +101 -1
- package/src/simplify_poly_radial_distance.js +85 -2
- package/src/svgii/geometry.js +1 -0
- package/src/svgii/pathData_fromPoly.js +22 -7
- package/src/svgii/pathData_toPolygon.js +122 -230
- package/src/svgii/poly_analyze.js +114 -435
- package/src/svgii/poly_analyze_get_chunks.js +67 -0
- package/src/svgii/poly_normalize.js +51 -0
- package/src/svgii/poly_to_pathdata.js +51 -24
- package/src/svgii/rounding.js +36 -0
- package/src/svgii/svg_cleanup.js +10 -0
- package/dist/svg-path-simplify.min.js.gz +0 -0
package/README.md
CHANGED
|
@@ -32,6 +32,7 @@ Unlike most existing approaches (e.g in graphic applications), it checks where s
|
|
|
32
32
|
* adaptive coordinate rounding: small or large details can be auto-detected to find a suitable floating point accuracy without guessing the decimal value (3 decimals may not be the silver bullet=)
|
|
33
33
|
* split segments at extremes – only useful for manual editing
|
|
34
34
|
* optimize either path data strings or SVG markup code
|
|
35
|
+
* create curves from polylines (curve-fitting)
|
|
35
36
|
|
|
36
37
|
|
|
37
38
|
## TOC
|
|
@@ -41,13 +42,15 @@ Unlike most existing approaches (e.g in graphic applications), it checks where s
|
|
|
41
42
|
- [ESM version](#esm-version)
|
|
42
43
|
+ [node.js](#nodejs)
|
|
43
44
|
- [Example 2: Apply options](#example-2-apply-options)
|
|
44
|
-
+ [
|
|
45
|
+
+ [Web worker](#web-worker)
|
|
46
|
+
* [API](#api)
|
|
45
47
|
+ [Simplification parameters](#simplification-parameters)
|
|
46
48
|
+ [Advanced simplifications](#advanced-simplifications)
|
|
47
49
|
+ [Output options](#output-options)
|
|
48
50
|
+ [SVG scaling](#svg-scaling)
|
|
49
51
|
+ [SVG output optimizations](#svg-output-optimizations)
|
|
50
52
|
+ [SVG input normalization](#svg-input-normalization)
|
|
53
|
+
* [Lite version](#lite-version--only-path-data)
|
|
51
54
|
* [Demos](#demos)
|
|
52
55
|
+ [Web app](#web-app)
|
|
53
56
|
+ [Demo files](#demo-files)
|
|
@@ -117,7 +120,7 @@ npm install svg-path-simplify
|
|
|
117
120
|
|
|
118
121
|
To simplify entire SVG documents in node.js we need to emulate the browsers DOM methods `DOMParser` and `XMLSerializer`. I opted for [linkedom](https://github.com/WebReflection/linkedom). Just make sure to import the `svg-path-simplify/node` module. It will load linkedom's methods `DOMParser` and add a polyfill for `XMLSerializer`
|
|
119
122
|
|
|
120
|
-
```
|
|
123
|
+
```js
|
|
121
124
|
/**
|
|
122
125
|
* load node polyfills for DOM parsing
|
|
123
126
|
* loads linkedom npm module for DOM parsing and emulation
|
|
@@ -131,10 +134,22 @@ let pathDataString = `M 57.13 15.5c 13.28 0 24.53 8.67 28.42 20.65c 0.94 2.91 1
|
|
|
131
134
|
let pathDataOpt = svgPathSimplify(pathDataString);
|
|
132
135
|
```
|
|
133
136
|
|
|
137
|
+
### Web worker
|
|
138
|
+
Similar to node.js usage we need [linkedom](https://github.com/WebReflection/linkedom) to polyfill missing DOMParser functionality in a headless environment.
|
|
139
|
+
|
|
140
|
+
```js
|
|
141
|
+
import './svg-path-simplify.worker.polyfills.js';
|
|
142
|
+
import { svgPathSimplify } from './svg-path-simplify.esm.js';
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Import the polyfill module from the dist folder. It imports the worker version of linkedom.
|
|
146
|
+
See [svg-path-simplify.worker.js](https://github.com/herrstrietzel/svg-path-simplify/blob/main/dist/svg-path-simplify.worker.js).
|
|
147
|
+
|
|
148
|
+
|
|
134
149
|
#### Example 2: Apply options
|
|
135
150
|
The following example would return a detailed object containing the stringified "normalized" pathdata (all absolute and "longhand" command notation).
|
|
136
151
|
|
|
137
|
-
```
|
|
152
|
+
```js
|
|
138
153
|
let options = {
|
|
139
154
|
extrapolateDominant: false,
|
|
140
155
|
decimals: 3,
|
|
@@ -200,9 +215,9 @@ Z
|
|
|
200
215
|
|
|
201
216
|
|
|
202
217
|
|
|
203
|
-
|
|
218
|
+
## API
|
|
204
219
|
|
|
205
|
-
```
|
|
220
|
+
```js
|
|
206
221
|
let options = {}
|
|
207
222
|
let output = svgPathSimplify(input, options);
|
|
208
223
|
```
|
|
@@ -290,6 +305,36 @@ Scaling only indirectly affects file size analogous to rounding. Use it only for
|
|
|
290
305
|
| stylesToAttributes | consolidates styles and set them to attributes. Also removes invalid attributes (e.g `font-family` for paths) | Boolean | false |
|
|
291
306
|
|
|
292
307
|
|
|
308
|
+
## Lite version – only path data
|
|
309
|
+
Since the library aims at a complete toolset it might be an overkill for your needs.
|
|
310
|
+
For this use case you can opt for the lighter pathdata only version »svg-path-simplify.pathdata.esm.min«. Minified filesize is ~41 KB / 17 KB gzipped (compared to the full library with ~72/27 KB)
|
|
311
|
+
|
|
312
|
+
The API is compatible but simply missing some options such as:
|
|
313
|
+
* polygon smoothing/curve fitting
|
|
314
|
+
* svg processing - only path data is allowed
|
|
315
|
+
* no scaling
|
|
316
|
+
* no path direction fixes
|
|
317
|
+
|
|
318
|
+
```js
|
|
319
|
+
|
|
320
|
+
|
|
321
|
+
import { simplifyPathData } from '../dist/svg-path-simplify.pathdata.esm.js'
|
|
322
|
+
|
|
323
|
+
let pathDataString =
|
|
324
|
+
`
|
|
325
|
+
M 57.13 15.5
|
|
326
|
+
c 13.28 0 24.53 8.67 28.42 20.65
|
|
327
|
+
c 0.94 2.91 1.45 6.01 1.45 9.23
|
|
328
|
+
`
|
|
329
|
+
// try to simplify
|
|
330
|
+
let pathDataOpt = simplifyPathData(pathDataString);
|
|
331
|
+
|
|
332
|
+
/*
|
|
333
|
+
or with options let pathDataOpt = simplifyPathData(pathDataString, options);
|
|
334
|
+
*/
|
|
335
|
+
|
|
336
|
+
```
|
|
337
|
+
|
|
293
338
|
|
|
294
339
|
|
|
295
340
|
## Demos
|
|
@@ -335,6 +380,8 @@ SVGs > 1 MB are most of the time not salvagable. At least if they contain 10K+ o
|
|
|
335
380
|
|
|
336
381
|
## Changelog, Updates and rollback
|
|
337
382
|
### Changelog
|
|
383
|
+
* 0.3.0 webapp adds support for multi file batch optimizations, web worker support, drawing direction fix option (for fill rules)
|
|
384
|
+
* 0.2.0 added features for polygon curve fitting
|
|
338
385
|
* 0.1.0 fixed node support for complete svg files
|
|
339
386
|
|
|
340
387
|
### Rollback
|