svg-path-simplify 0.2.6 → 0.3.0

package/README.md

@@ -32,6 +32,7 @@ Unlike most existing approaches (e.g in graphic applications), it checks where s
 * 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=)
 * split segments at extremes – only useful for manual editing
 * optimize either path data strings or SVG markup code
+* create curves from polylines (curve-fitting)
 
 
 ## TOC
@@ -41,13 +42,15 @@ Unlike most existing approaches (e.g in graphic applications), it checks where s
     - [ESM version](#esm-version)
   + [node.js](#nodejs)
     - [Example 2: Apply options](#example-2-apply-options)
-  + [API](#api)
+  + [Web worker](#web-worker)
+* [API](#api)
   + [Simplification parameters](#simplification-parameters)
   + [Advanced simplifications](#advanced-simplifications)
   + [Output options](#output-options)
   + [SVG scaling](#svg-scaling)
   + [SVG output optimizations](#svg-output-optimizations)
   + [SVG input normalization](#svg-input-normalization)
+* [Lite version](#lite-version–only-path-data)
 * [Demos](#demos)
   + [Web app](#web-app)
   + [Demo files](#demo-files)
@@ -117,7 +120,7 @@ npm install svg-path-simplify
 
 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`
 
-``` 
+```js 
 /**
  * load node polyfills for DOM parsing
  * 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
 let pathDataOpt = svgPathSimplify(pathDataString);
 ```
 
+### Web worker
+Similar to node.js usage we need [linkedom](https://github.com/WebReflection/linkedom) to polyfill missing DOMParser functionality in a headless environment.
+
+```js
+import './svg-path-simplify.worker.polyfills.js';
+import { svgPathSimplify } from './svg-path-simplify.esm.js';
+```
+
+Import the polyfill module from the dist folder. It imports the worker version of linkedom.
+See [svg-path-simplify.worker.js](https://github.com/herrstrietzel/svg-path-simplify/blob/main/dist/svg-path-simplify.worker.js).  
+
+
 #### Example 2: Apply options  
 The following example would return a detailed object containing the stringified "normalized" pathdata (all absolute and "longhand" command notation). 
 
-``` 
+```js 
 let options = {
  extrapolateDominant: false,
  decimals: 3,
@@ -200,9 +215,9 @@ Z
 
 
 
-### API
+## API
 
-``` 
+```js 
 let options = {}
 let output = svgPathSimplify(input, options);
 ```
@@ -238,6 +253,21 @@ These params control shich simplifications are applied. The default settings aim
 | simplifyRound | replaces small round segments encloses by linetos – helps to simplify shapes like gears/cogs | Boolean | false |
 
 
+### Path direction
+| parameter | effect | type | default |
+| -- | -- | -- | -- |
+| fixDirections | alternates sub path directions to fulfill non-zero. Makes fill-rule attribute obsolete and render correct in other environments e.g when converting to fonts | Boolean | false |
+| reversePath | simply reverses drawing direction - sometimes needed for line animations | Boolean | false |
+
+
+
+### Polygon options
+| parameter | effect | type | default |
+| -- | -- | -- | -- |
+| smoothPoly | Curve-fitting: Converts polylines to cubic beziers | Boolean | false |
+
+
+
 ### Output options
 
 | parameter | effect | type | default |
@@ -254,6 +284,7 @@ These params control shich simplifications are applied. The default settings aim
 | toRelative | converts all commands to relative – reduces file size | Boolean | true |
 | toShorthands | converts all commands to shorthand when applicable – reduces file size | Boolean | true |
 
+
 ### SVG scaling
 Scaling only indirectly affects file size analogous to rounding. Use it only for very large or small SVGs. Finding the »sweet spot« where all coordinates can be expressed in integers can reduce file size as no decimal separators are required. 
 
@@ -270,6 +301,39 @@ Scaling only indirectly affects file size analogous to rounding. Use it only for
 | arcToCubic | converts elliptic arc `A` commands to cubic approximations – not recommended | Boolean | false |
 | removeHidden | removes hidden elements for SVG inputs | Boolean | true |
 | mergePaths | concatenates paths into single one – does not respect individual styles! | Boolean | false |
+| shapesToPaths | converts shapes to paths - usually not recommended as shapes are most often more compact. But useful for path concatenation | Boolean | false |
+| stylesToAttributes | consolidates styles and set them to attributes. Also removes invalid attributes (e.g `font-family` for paths) | Boolean | false |
+
+
+## Lite version – only path data
+Since the library aims at a complete toolset it might be an overkill for your needs. 
+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)
+
+The API is compatible but simply missing some options such as:  
+* polygon smoothing/curve fitting
+* svg processing - only path data is allowed 
+* no scaling 
+* no path direction fixes
+
+```js
+
+
+import { simplifyPathData } from '../dist/svg-path-simplify.pathdata.esm.js'
+
+let pathDataString =
+`
+M 57.13 15.5
+c 13.28 0 24.53 8.67 28.42 20.65
+c 0.94 2.91 1.45 6.01 1.45 9.23
+`
+// try to simplify
+let pathDataOpt = simplifyPathData(pathDataString);
+
+/*
+ or with options let pathDataOpt = simplifyPathData(pathDataString, options);
+*/
+
+```
 
 
 
@@ -279,6 +343,15 @@ You can easily test this library via the [**webapp**](https://herrstrietzel.gith
 
 ![web app](./demo/img/screenshot.png)    
 
+#### Features
+* test all provided simplification option - export settings as JS object
+* preview different settings 
+* accepts SVG files
+* path data strings
+* supports multi file batch processing
+* open results in codepen or svg-path-editor
+* download self contained SVG
+
 
 ### Demo files
 * [simple setup IIFE](./demo/simple-iife.html)
@@ -338,4 +411,6 @@ You can also post in the [discussions](https://github.com/herrstrietzel/svg-path
 * [Vitaly Puzrin](https://github.com/puzrin) for [svgpath library](https://github.com/fontello/svgpath) providing for instance a great and customizable [arc-to-cubic approximation](https://github.com/fontello/svgpath/blob/master/lib/a2c.js) – the base for the more accurate arc-to-cubic approximations
 * [Jarek Foksa](https://github.com/jarek-foksa) for developping the great [getPathData() polyfill](https://github.com/jarek-foksa/path-data-polyfill) – probably the most productive contributor to the ["new" W3C SVGPathData interface draft](https://svgwg.org/specs/paths/#InterfaceSVGPathData)
 * obviously, [Dmitry Baranovskiy](https://github.com/dmitrybaranovskiy) – a lot of these helper functions originate either from Raphaël or snap.svg – or are at least heavily inspired by some helpers from these libraries
+* [Andrea Giammarchi a.k.a WebReflection](https://github.com/WebReflection) for [linkedom](https://github.com/WebReflection/linkedom) which helped to make this lib run also in node or a web worker
+* [Photopea](https://github.com/photopea) for the fast [UZIP](https://github.com/photopea/UZIP.js) which is deployed in the webapp for batch file downloads.