svg-path-simplify 0.3.6 → 0.4.1
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/CHANGELOG.md +24 -0
- package/README.md +38 -85
- package/dist/svg-path-simplify.esm.js +1405 -528
- package/dist/svg-path-simplify.esm.min.js +2 -2
- package/dist/svg-path-simplify.js +1405 -528
- package/dist/svg-path-simplify.min.js +2 -2
- package/dist/svg-path-simplify.pathdata.esm.js +76 -15
- package/dist/svg-path-simplify.pathdata.esm.min.js +2 -2
- package/docs/api.md +127 -0
- package/index.html +216 -277
- package/package.json +1 -1
- package/src/constants.js +8 -1
- package/src/pathData_simplify_cubic.js +0 -8
- package/src/pathSimplify-main.js +25 -9
- package/src/svg_flatten_transforms.js +1 -1
- package/src/svgii/convert_colors.js +52 -5
- package/src/svgii/convert_units.js +25 -10
- package/src/svgii/pathData_analyze.js +33 -13
- package/src/svgii/pathData_convert.js +62 -6
- package/src/svgii/pathData_parse_els.js +21 -5
- package/src/svgii/pathData_toPolygon.js +3 -1
- package/src/svgii/pathData_transform.js +307 -0
- package/src/svgii/svg-styles-getTransforms.js +119 -8
- package/src/svgii/svg-styles-to-attributes-const.js +19 -4
- package/src/svgii/svg_cleanup.js +319 -97
- package/src/svgii/svg_el_parse_style_props.js +218 -76
- package/src/svgii/transform_qr_decompose.js +74 -0
- package/src/svgii/pathData_scale.js +0 -42
- package/src/svgii/svg-styles-to-attributes.js +0 -236
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## [0.4.1] - 2026-03-16
|
|
4
|
+
### Fixed
|
|
5
|
+
- null transform removal matrix(1 0 0 1 0 0)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## [0.4.0] - 2026-03-16
|
|
9
|
+
### Added
|
|
10
|
+
- convert transforms to hard coded geometry
|
|
11
|
+
- new style-to-attribute conversion
|
|
12
|
+
- options to specify which shapes should be converted to paths
|
|
13
|
+
- path to shape conversion
|
|
14
|
+
- ungroup paths
|
|
15
|
+
- webapp refined option grouping
|
|
16
|
+
- arc radii minification
|
|
17
|
+
- minify RGB color values
|
|
18
|
+
- move defs to top of markup
|
|
19
|
+
- remove futile clip-paths
|
|
20
|
+
- remove SVG comments
|
|
21
|
+
|
|
22
|
+
### Changed
|
|
23
|
+
- improved extreme detection for simplification
|
|
24
|
+
- stricter shorthand thresholds
|
package/README.md
CHANGED
|
@@ -15,26 +15,58 @@ While this library reduces SVG markup sizes significantly by removing commands i
|
|
|
15
15
|
Unlike most existing approaches (e.g in graphic applications), it checks where simplifications are suitable and stops simplification at the right »point« (literally).
|
|
16
16
|
|
|
17
17
|

|
|
18
|
-
*Fira Sans (based on truetype/glyph quadratic commands) converted to cubic
|
|
18
|
+
*Fira Sans (based on truetype/glyph quadratic commands) converted to cubic Béziers. Right:Original; Left:optimized*
|
|
19
19
|
|
|
20
|
-
## Features
|
|
21
|
-
|
|
20
|
+
## Features
|
|
21
|
+
### Path simplification
|
|
22
|
+
* reduces the number of SVG commands (both Béziers and lines) by converting/combining adjacent:
|
|
22
23
|
* Béziers (`C`, `Q`)
|
|
23
24
|
* flat Béziers to Linetos
|
|
24
25
|
* colinear lines (`L`)
|
|
26
|
+
* converts cubic Béziers which can be expressed as more compact quadratic
|
|
25
27
|
|
|
26
28
|
* reorders path starting points to replace unnecessary closing linetos by `Z` commands
|
|
27
29
|
* optimizes SVG file size by contextually converting to:
|
|
28
30
|
* shorthand commands (`C` => `S`, `Q` => `T`, `L`=>`H` or `V`)
|
|
29
31
|
* cubics to quadratic Béziers (only 1 control point)
|
|
30
|
-
* cubic arc-like segments to `A` (elliptic arc)
|
|
32
|
+
* cubic arc-like segments to `A` (elliptic arc) and `rx`, `ry` radii optimization for semi-circle segments
|
|
31
33
|
|
|
34
|
+
### Coordinate rounding
|
|
32
35
|
* 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=)
|
|
36
|
+
|
|
37
|
+
### SVG optimization
|
|
38
|
+
Cleanup for:
|
|
39
|
+
* meta data
|
|
40
|
+
* namespaced attributes or elements
|
|
41
|
+
* convert `xlink:href` to `href` and vice-versa
|
|
42
|
+
* move `defs` to the top
|
|
43
|
+
* remove futile `<clipPath>` defs spanning across the entire viewBox
|
|
44
|
+
* convert styles to presentation attributes
|
|
45
|
+
|
|
46
|
+
### Shape conversions
|
|
47
|
+
* convert shapes such as `<circle>`, `<ellipse>`, `<rect>` etc. to `<path>` – supports relative `%` or physical units like `mm`
|
|
48
|
+
* convert paths to shapes – if applicable
|
|
49
|
+
|
|
50
|
+
### Polygons
|
|
51
|
+
* convert paths to polygons
|
|
52
|
+
* reduce poly vertices
|
|
53
|
+
* convert/smooth polygons to curved path data
|
|
54
|
+
|
|
55
|
+
### Transforms
|
|
56
|
+
* convert transforms to hard-coded path data
|
|
57
|
+
* scale SVGs to desired output size
|
|
58
|
+
|
|
59
|
+
### Path directions
|
|
60
|
+
* reverse path drawing directions
|
|
61
|
+
* auto-fix compound path directions to comply with non-zero fill rules
|
|
62
|
+
|
|
63
|
+
### Additional features
|
|
33
64
|
* split segments at extremes – only useful for manual editing
|
|
34
65
|
* optimize either path data strings or SVG markup code
|
|
35
66
|
* create curves from polylines (curve-fitting)
|
|
36
67
|
|
|
37
68
|
|
|
69
|
+
|
|
38
70
|
## TOC
|
|
39
71
|
* [Usage](#usage)
|
|
40
72
|
+ [Browser](#browser)
|
|
@@ -44,12 +76,6 @@ Unlike most existing approaches (e.g in graphic applications), it checks where s
|
|
|
44
76
|
- [Example 2: Apply options](#example-2-apply-options)
|
|
45
77
|
+ [Web worker](#web-worker)
|
|
46
78
|
* [API](#api)
|
|
47
|
-
+ [Simplification parameters](#simplification-parameters)
|
|
48
|
-
+ [Advanced simplifications](#advanced-simplifications)
|
|
49
|
-
+ [Output options](#output-options)
|
|
50
|
-
+ [SVG scaling](#svg-scaling)
|
|
51
|
-
+ [SVG output optimizations](#svg-output-optimizations)
|
|
52
|
-
+ [SVG input normalization](#svg-input-normalization)
|
|
53
79
|
* [Lite version](#lite-version--only-path-data)
|
|
54
80
|
* [Demos](#demos)
|
|
55
81
|
+ [Web app](#web-app)
|
|
@@ -227,82 +253,9 @@ The first parameter is the SVG input:
|
|
|
227
253
|
* a polygon string – as used in SVG `<polygon>` element's `points` attribute
|
|
228
254
|
* an entire `<svg>` markup
|
|
229
255
|
|
|
230
|
-
While svg-path-simplify aims at a convenient
|
|
231
|
-
|
|
232
|
-
### Simplification parameters
|
|
233
|
-
These params control shich simplifications are applied. The default settings aim at a safe or balanced performance-to-minification ratio. However if your main goal is to get the most compact result you can enable additional options which also require more processing time.
|
|
234
|
-
| parameter | effect | type | default |
|
|
235
|
-
| -- | -- | -- | -- |
|
|
236
|
-
| simplifyBezier | main Bézier simplification. When disabled you get the common optimization similar to SVGO (rounding, to all relative and shorthand conversions) | Boolean | true |
|
|
237
|
-
| tolerance | increase or decrease tolerance: higher values allow more distortions, lower ones more shape fidelity | Number | 1 |
|
|
238
|
-
| optimizeOrder | reorders commands to get more adjacent simplification candidates. Improves optimization efficiency | Boolean | true |
|
|
239
|
-
| removeColinear | removes unnecessary zero-length or colinear lineto commands | Boolean | true |
|
|
240
|
-
| flatBezierToLinetos | replaces flat Béziers with linetos which also can be stripped via previous colinear removal | Boolean | true |
|
|
241
|
-
| revertToQuadratics | replaces cubic Béziers with quadratic (more compact) ones when applicable | Boolean | true |
|
|
242
|
-
| keepExtremes | skips simplification accross x/y extrema – improves shape fidelity | Boolean | true |
|
|
243
|
-
| keepCorners | skips simplification corners – improves shape fidelity | Boolean | true |
|
|
244
|
-
| keepInflections | retains commands introducing direction changes – adds complexity but may help for editing in a graphic application | Boolean | false |
|
|
245
|
-
|
|
246
|
-
### Advanced simplifications
|
|
247
|
-
| parameter | effect | type | default |
|
|
248
|
-
| -- | -- | -- | -- |
|
|
249
|
-
| refineExtremes | tries to combine commands close to an adjacent x/y extreme segment | Boolean | false |
|
|
250
|
-
| addExtremes | adds commands at x/y extrema – adds complexity but may help for editing in a graphic application – when using this option enable `refineExtremes` as well to avoid tiny adjacent segments | Boolean | false |
|
|
251
|
-
| simplifyCorners | replaces Bézier segments enclosed by linetos with single quadratic commands – handy to reduce overly complex tiny corner roundings. See example in [webapp](https://herrstrietzel.github.io/svg-path-simplify?samples=fontawesome_gears&refineExtremes=true&simplifyCorners=true) | Boolean | false |
|
|
252
|
-
| cubicToArc | replaces Bézier segments by elliptic arc `A` commands where applicable – can reduce complexity for semi- or full circles | Boolean | false |
|
|
253
|
-
| simplifyRound | replaces small round segments encloses by linetos – helps to simplify shapes like gears/cogs | Boolean | false |
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
### Path direction
|
|
257
|
-
| parameter | effect | type | default |
|
|
258
|
-
| -- | -- | -- | -- |
|
|
259
|
-
| 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 |
|
|
260
|
-
| reversePath | simply reverses drawing direction - sometimes needed for line animations | Boolean | false |
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
### Polygon options
|
|
265
|
-
| parameter | effect | type | default |
|
|
266
|
-
| -- | -- | -- | -- |
|
|
267
|
-
| smoothPoly | Curve-fitting: Converts polylines to cubic beziers | Boolean | false |
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
### Output options
|
|
272
|
-
|
|
273
|
-
| parameter | effect | type | default |
|
|
274
|
-
| -- | -- | -- | -- |
|
|
275
|
-
| getObject | whether to return the SVG/pathdata markup directly or a detailed object (containing more info) | Boolean | true |
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
### SVG output optimizations
|
|
279
|
-
| parameter | effect | type | default |
|
|
280
|
-
| -- | -- | -- | -- |
|
|
281
|
-
| autoAccuracy | calculates a suitable floating point precision for coordinate rounding. Usually rather conservative – decreasing by one decimal should work without significant distortions | Boolean | true |
|
|
282
|
-
| decimals | manual floating point rounding precision – overriden when `autoAccuracy` is enabled | Number | 3 |
|
|
283
|
-
| minifyD | path data microoptimization: removes recurring command type tokens, whitespace and leading zeroes: 0: maximum optimization; 1: "verbose" dont't omit command type tokes; 2: "beautify" separate each command with new lines (e.g for educational purposes) | Number | 0 |
|
|
284
|
-
| toRelative | converts all commands to relative – reduces file size | Boolean | true |
|
|
285
|
-
| toShorthands | converts all commands to shorthand when applicable – reduces file size | Boolean | true |
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
### SVG scaling
|
|
289
|
-
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.
|
|
290
|
-
|
|
291
|
-
| parameter | effect | type | default |
|
|
292
|
-
| -- | -- | -- | -- |
|
|
293
|
-
| scale | scales all pathdata, `viewBox`, `width` and `height` attributes | Boolean | true |
|
|
294
|
-
| scaleTo | scales to a specified max width | Boolean | false |
|
|
295
|
-
|
|
256
|
+
While svg-path-simplify aims at a convenient usage with effective and safe defaults you can tweak the simplification and output via these options passed as an object.
|
|
296
257
|
|
|
297
|
-
|
|
298
|
-
| parameter | effect | type | default |
|
|
299
|
-
| -- | -- | -- | -- |
|
|
300
|
-
| quadraticToCubic | converts all quadratic Béziers to cubics – recommended for efficiency | Boolean | true |
|
|
301
|
-
| arcToCubic | converts elliptic arc `A` commands to cubic approximations – not recommended | Boolean | false |
|
|
302
|
-
| removeHidden | removes hidden elements for SVG inputs | Boolean | true |
|
|
303
|
-
| mergePaths | concatenates paths into single one – does not respect individual styles! | Boolean | false |
|
|
304
|
-
| shapesToPaths | converts shapes to paths - usually not recommended as shapes are most often more compact. But useful for path concatenation | Boolean | false |
|
|
305
|
-
| stylesToAttributes | consolidates styles and set them to attributes. Also removes invalid attributes (e.g `font-family` for paths) | Boolean | false |
|
|
258
|
+
See [documentation for complete list of parameters](docs/api.md)
|
|
306
259
|
|
|
307
260
|
|
|
308
261
|
## Lite version – only path data
|