svg-path-simplify 0.0.7 → 0.0.9
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 +25 -5
- package/dist/svg-path-simplify.esm.js +1250 -562
- package/dist/svg-path-simplify.esm.min.js +1 -1
- package/dist/svg-path-simplify.js +4756 -4068
- package/dist/svg-path-simplify.min.js +1 -1
- package/dist/svg-path-simplify.node.js +1250 -562
- package/dist/svg-path-simplify.node.min.js +1 -1
- package/index.html +89 -29
- package/package.json +5 -3
- package/src/detect_input.js +17 -10
- package/src/dom-polyfill.js +29 -0
- package/src/dom-polyfill_back.js +22 -0
- package/src/index.js +10 -1
- package/src/pathData_simplify_cubic.js +114 -143
- package/src/pathData_simplify_cubic_extrapolate.js +64 -35
- package/src/pathSimplify-main.js +113 -165
- package/src/svgii/geometry.js +8 -155
- package/src/svgii/geometry_flatness.js +94 -0
- package/src/svgii/pathData_analyze.js +15 -596
- package/src/svgii/pathData_convert.js +26 -17
- package/src/svgii/pathData_interpolate.js +65 -0
- package/src/svgii/pathData_parse.js +25 -9
- package/src/svgii/pathData_parse_els.js +245 -0
- package/src/svgii/pathData_remove_collinear.js +33 -28
- package/src/svgii/pathData_remove_orphaned.js +21 -0
- package/src/svgii/pathData_remove_zerolength.js +17 -3
- package/src/svgii/pathData_reorder.js +9 -3
- package/src/svgii/pathData_simplify_refineCorners.js +160 -0
- package/src/svgii/pathData_simplify_refineExtremes.js +208 -0
- package/src/svgii/pathData_split.js +43 -15
- package/src/svgii/pathData_stringify.js +3 -12
- package/src/svgii/rounding.js +35 -27
- package/src/svgii/svg_cleanup.js +4 -1
- package/testSVG.js +39 -0
- package/src/pathData_simplify_cubic_arr.js +0 -50
- package/src/svgii/simplify.js +0 -248
- package/src/svgii/simplify_bezier.js +0 -470
- package/src/svgii/simplify_linetos.js +0 -93
package/README.md
CHANGED
|
@@ -3,9 +3,12 @@
|
|
|
3
3
|
[](https://cdn.jsdelivr.net/npm/svg-path-simplify@latest/dist/svg-path-simplify.min.js)
|
|
4
4
|
[](https://www.unpkg.com/svg-path-simplify@latest/dist/svg-path-simplify.js)
|
|
5
5
|
|
|
6
|
+
<div align="center" style="text-align:center">
|
|
7
|
+
<img width="100" height="100" style="display:inline-block" src="./favicon.svg">
|
|
8
|
+
<h1 align="center">svg-path-simplify</h1>
|
|
9
|
+
<p align="center">Simplify Bézier paths while keeping shape</p>
|
|
10
|
+
</div>
|
|
6
11
|
|
|
7
|
-
# svg-path-simplify
|
|
8
|
-
Simplify Bézier paths while keeping shape.
|
|
9
12
|
|
|
10
13
|
## *Watch the curve, not the file size!*
|
|
11
14
|
While this library reduces SVG markup sizes significantly by removing commands it prioritizes **visual quality** over numeric compression gains.
|
|
@@ -30,9 +33,6 @@ Unlike most existing approaches (e.g in graphic applications), it checks where s
|
|
|
30
33
|
* split segments at extremes – only useful for manual editing
|
|
31
34
|
* optimize either path data strings or SVG markup code
|
|
32
35
|
|
|
33
|
-
### Limitations: What it's not
|
|
34
|
-
This lib's focus is on path data optimizations. While it also provides some basic cleanup options for entire SVG documents (e.g removal of hidden elements or path merging) – if you need a full blown document optimization better opt for [SVGO](https://github.com/svg/svgo).
|
|
35
|
-
|
|
36
36
|
|
|
37
37
|
## Usage
|
|
38
38
|
|
|
@@ -208,6 +208,25 @@ You can easily test this library via the [simplify webapp](https://herrstrietzel
|
|
|
208
208
|
* [simple setup esm](./demo/simple-esm.html)
|
|
209
209
|
|
|
210
210
|
|
|
211
|
+
|
|
212
|
+
## Limitations
|
|
213
|
+
### Optimization of complete SVG files
|
|
214
|
+
This lib's focus is on path data optimizations. While it also provides some basic cleanup options for entire SVG documents (e.g removal of hidden elements or path merging) – if you need a full blown document optimization better opt for [SVGO](https://github.com/svg/svgo) or the GUI [SVGOMG](https://svgomg.net).
|
|
215
|
+
SVGO comes with a plethora of options to remove document overhead like unused definitions like gradients, defs, styles etc.
|
|
216
|
+
|
|
217
|
+
### »Natural« limitations of vector/curve simplification
|
|
218
|
+
Unlike raster images we can't reduce information in vector graphics in a predictable fashion. While we *can* apply brute force and remove points – it won't work:
|
|
219
|
+
|
|
220
|
+
We always need to **respect the complexity of a graphic**: if we remove too many segments – we significantly change the appearance.
|
|
221
|
+
|
|
222
|
+
**Scaling** down can only help if we're dealing with an either huge or microscopic coordinate space: large numbers vs. small ones requiring too many floating point decimals. For instance scaling down a 100x100 viewBox to 24x24 won't significantly reduce the ultimate file size or even result in larger markup sizes due too more floating point values.
|
|
223
|
+
|
|
224
|
+
### The sad truth about »gigantic« SVG files
|
|
225
|
+
SVGs > 1 MB are most of the time not salvagable. At least if they contain 10K+ of path data. Quite often their size comes from the complexity itself not from overhead or simplifyable geometries. This is especially true for many CAD exports containing a rubbish structure with way too many separate line elements that can't easily be combined to curves.
|
|
226
|
+
|
|
227
|
+
**Recommendation:** If a simplification still doesn't result in a significantly smaller file size or better rendering – a Hi-res raster image is often the only reasonable workaround. Bear in mind, most rendering pipelines for raster images are more optimized than vector renderers (e.g often benefitting from gpu accelleration) so a 1MB raster image (png, webp, jpeg etc) won't let your renderer scream in agony – a 1MB SVG does!
|
|
228
|
+
|
|
229
|
+
|
|
211
230
|
## Changelog, Updates and rollback
|
|
212
231
|
### Changelog
|
|
213
232
|
... not much to say at this point
|
|
@@ -237,6 +256,7 @@ You can also post in the [discussions](https://github.com/herrstrietzel/svg-path
|
|
|
237
256
|
|
|
238
257
|
|
|
239
258
|
## Credits
|
|
259
|
+
* [Yqnn](https://github.com/Yqnn?tab=repositories) for creating the indispensible tool [»svg-path-editor«](https://yqnn.github.io/svg-path-editor) – a must-bookmark for visual SVG debugging!
|
|
240
260
|
* [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
|
|
241
261
|
* [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)
|
|
242
262
|
* 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
|