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/index.html
CHANGED
|
@@ -66,16 +66,24 @@
|
|
|
66
66
|
-->
|
|
67
67
|
<script src="demo/samples.js" defer></script>
|
|
68
68
|
|
|
69
|
+
<!-- Md parser -->
|
|
70
|
+
<script src="https://cdn.jsdelivr.net/gh/UmemotoCtrl/mdpjs@0.1.4/js/mdp.min.js" async></script>
|
|
71
|
+
|
|
72
|
+
<!-- Zip creation -->
|
|
73
|
+
<script src="https://cdn.jsdelivr.net/npm/uzip@0.20201231.0/UZIP.min.js" async></script>
|
|
74
|
+
|
|
69
75
|
|
|
70
76
|
<!-- UI helpers -->
|
|
71
|
-
<link rel="preload" href="https://cdn.jsdelivr.net/npm/enhance-inputs@0.3.
|
|
77
|
+
<link rel="preload" href="https://cdn.jsdelivr.net/npm/enhance-inputs@0.3.7/dist/enhanceInputs.min.css"
|
|
78
|
+
as="style" />
|
|
79
|
+
|
|
80
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/enhance-inputs@0.3.7/dist/enhanceInputs.min.css">
|
|
81
|
+
<script src="https://cdn.jsdelivr.net/npm/enhance-inputs@0.3.7/dist/enhanceInputs.min.js" defer></script>
|
|
72
82
|
|
|
73
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/enhance-inputs@0.3.6/dist/enhanceInputs.min.css">
|
|
74
|
-
<script src="https://cdn.jsdelivr.net/npm/enhance-inputs@0.3.6/dist/enhanceInputs.min.js" defer></script>
|
|
75
83
|
<!--
|
|
76
84
|
<link rel="stylesheet" href="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.css">
|
|
77
85
|
<script src="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.js" defer></script>
|
|
78
|
-
|
|
86
|
+
-->
|
|
79
87
|
|
|
80
88
|
|
|
81
89
|
<!--
|
|
@@ -85,9 +93,10 @@
|
|
|
85
93
|
<script src="dist/svg-path-simplify.js" defer></script>
|
|
86
94
|
<link rel="stylesheet" href="demo/css/app.css">
|
|
87
95
|
|
|
88
|
-
<script src="demo/lib/elzoomo/elzoomo.
|
|
96
|
+
<script src="demo/lib/elzoomo/elzoomo.js" defer></script>
|
|
97
|
+
|
|
89
98
|
<script src="demo/app.js" type="module"></script>
|
|
90
|
-
|
|
99
|
+
|
|
91
100
|
|
|
92
101
|
|
|
93
102
|
</head>
|
|
@@ -109,7 +118,6 @@
|
|
|
109
118
|
<!--toolbars-->
|
|
110
119
|
<aside class="aside aside-1 hgh-100 aside scrollbar scroll-content-ld scroll-track pdd-1em pos-rlt">
|
|
111
120
|
|
|
112
|
-
|
|
113
121
|
<p class="txt-cnt mrg-0">
|
|
114
122
|
<img class="icn-logo " width="100" height="100"
|
|
115
123
|
src="https://herrstrietzel.github.io/svg-path-simplify/favicon.svg" alt="svg-path-simplify">
|
|
@@ -119,12 +127,6 @@
|
|
|
119
127
|
<h2 class="p txt-cnt">Optimizes SVG data by removing excessive commands and applying markup
|
|
120
128
|
minifications such as coordinate rounding, relative and applicable shorthand commands</h2>
|
|
121
129
|
|
|
122
|
-
<!--
|
|
123
|
-
<h1 class="h1 --txt-cnt"><img class="icn-svg icn-svg-logo dsp-inl-blc fnt-siz-1em" width="100" height="100" src="./favicon.svg" alt="svg-path-simplify">Simplify SVG files and path data</h1>
|
|
124
|
-
<p>Enter your SVG pathData or complete file markup or upload SVG files</p>
|
|
125
|
-
-->
|
|
126
|
-
|
|
127
|
-
|
|
128
130
|
<p class="--btn-neg" data-ui="reset"></p>
|
|
129
131
|
|
|
130
132
|
<details>
|
|
@@ -183,77 +185,117 @@
|
|
|
183
185
|
</label>
|
|
184
186
|
|
|
185
187
|
<details open>
|
|
186
|
-
<summary class="h3">SVG
|
|
188
|
+
<summary class="h3">SVG cleanup</summary>
|
|
187
189
|
<p>
|
|
188
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="arcToCubic">arcToCubic</label>
|
|
189
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="quadraticToCubic"
|
|
190
|
-
checked>quadraticToCubic</label>
|
|
191
|
-
|
|
192
190
|
<!--
|
|
193
|
-
|
|
194
191
|
<label><input type="checkbox" name="removePrologue" checked>removePrologue</label>
|
|
195
192
|
-->
|
|
196
193
|
|
|
197
194
|
<label><input type="checkbox" data-type="checkbox-switch" name="removeNameSpaced"
|
|
195
|
+
aria-description="Graphic applications often add a lot of propriatary/custom attributes – not required for browser or exchange format usage"
|
|
198
196
|
checked>removeNameSpaced</label>
|
|
199
197
|
|
|
200
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="
|
|
198
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeComments"
|
|
199
|
+
aria-description="Remove custom comments – disable it if you placed explanatory comments yourself"
|
|
200
|
+
checked>removeComments</label>
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeHidden"
|
|
204
|
+
aria-description="Graphic applications usually don't exclude hidden layers – enable it to remove them to remove undesired bloat"
|
|
201
205
|
checked>removeHidden</label>
|
|
202
206
|
|
|
203
207
|
<label><input type="checkbox" data-type="checkbox-switch" name="cleanupDefs"
|
|
204
|
-
|
|
208
|
+
aria-description="Removes empty defs and moves all defs to the top of the SVG markup – many environments struggle with footer placements (figma problem)"
|
|
205
209
|
checked>cleanupDefs</label>
|
|
206
210
|
|
|
207
211
|
<label><input type="checkbox" data-type="checkbox-switch" name="cleanupClip" checked
|
|
208
|
-
|
|
212
|
+
aria-description="Removes unnecessary clip-paths – spanning the entire viewBox (e.g typical for figma)">cleanupClip</label>
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="cleanupSVGAtts"
|
|
216
|
+
aria-description="Remove SVG non-presentational attributes from the root SVG"
|
|
217
|
+
checked>cleanupSVGAtts</label>
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeOffCanvas"
|
|
221
|
+
aria-description="Removes elements beyond viewBox/outside viewport">removeOffCanvas</label>
|
|
209
222
|
|
|
223
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="unGroup"
|
|
224
|
+
aria-description="Applications often add too many nest groups – removing also converts any styles to elements">unGroup</label>
|
|
210
225
|
|
|
211
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="cleanupSVGAtts"
|
|
212
|
-
data-info="remove SVG non-essential attributes" checked>cleanupSVGAtts</label>
|
|
213
226
|
|
|
227
|
+
<!--
|
|
228
|
+
|
|
229
|
+
<label><input type="checkbox" class="dsp-debug" name="convertTransforms">convertTransforms</label>
|
|
230
|
+
-->
|
|
231
|
+
</p>
|
|
232
|
+
</details>
|
|
214
233
|
|
|
234
|
+
<details open>
|
|
235
|
+
<summary class="h3">SVG style optimization</summary>
|
|
236
|
+
<p>
|
|
215
237
|
<label><input type="checkbox" data-type="checkbox-switch" name="cleanUpStrokes" checked
|
|
216
|
-
|
|
238
|
+
aria-description="removes stroke attributes when stroke color is missing">cleanUpStrokes</label>
|
|
217
239
|
|
|
240
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="stylesToAttributes"
|
|
241
|
+
aria-description="replaces inline styles with SVG atributes and removes obsolete attributes and styles">stylesToAttributes</label>
|
|
218
242
|
|
|
219
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="
|
|
220
|
-
|
|
221
|
-
>fixHref</label>
|
|
243
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="minifyRgbColors"
|
|
244
|
+
aria-description="Minifies RGB colors e.g for fill, stroke or stop-color">minifyRgbColors</label>
|
|
222
245
|
|
|
223
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="legacyHref"
|
|
224
|
-
data-info="Since many (non-browser) applications still depend on xlink:href notation you may convert href to xlink:href">legacyHref</label>
|
|
225
246
|
|
|
247
|
+
</p>
|
|
226
248
|
|
|
227
|
-
|
|
228
|
-
data-info="Removes elements beyond viewBox/outside viewport">removeOffCanvas</label>
|
|
249
|
+
</details>
|
|
229
250
|
|
|
230
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="addViewBox" checked
|
|
231
|
-
data-info="adds a viewBox attribute if missing – counter-productive if your SVG layout is fluid">addViewBox</label>
|
|
232
251
|
|
|
233
|
-
|
|
234
|
-
|
|
252
|
+
<details open>
|
|
253
|
+
<summary class="h3">SVG advanced conversions</summary>
|
|
235
254
|
|
|
255
|
+
<p>
|
|
256
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="addViewBox" checked
|
|
257
|
+
aria-description="Adds a viewBox attribute if missing – counter-productive if your SVG layout is fluid">addViewBox</label>
|
|
236
258
|
|
|
237
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="
|
|
238
|
-
|
|
259
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="addDimensions"
|
|
260
|
+
aria-description="Many graphic applications won't translate viewBox correctly to artboard/document size">addDimensions</label>
|
|
239
261
|
|
|
240
262
|
|
|
241
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="mergePaths"
|
|
263
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="mergePaths"
|
|
264
|
+
aria-description="Merge adjacent paths – can minify file size but won't allow you to select individual paths">mergePaths</label>
|
|
242
265
|
|
|
243
266
|
<label><input type="checkbox" data-type="checkbox-switch"
|
|
244
267
|
name="removeDimensions">removeDimensions</label>
|
|
245
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="removeIds"
|
|
268
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeIds"
|
|
269
|
+
aria-description="Graphic applications usually add unsemantic generic IDs for each layer – remove them unless you need them for JS selection (e.g event bindings)">removeIds</label>
|
|
246
270
|
<label><input type="checkbox" data-type="checkbox-switch"
|
|
271
|
+
aria-description="Graphic applications often add un semantic class names – remove these unless you have specified them on your own or these are required for CSS styling (e.g icon assets)"
|
|
247
272
|
name="removeClassNames">removeClassNames</label>
|
|
273
|
+
|
|
248
274
|
<label><input type="checkbox" data-type="checkbox-switch" name="omitNamespace"
|
|
249
|
-
|
|
275
|
+
aria-description="Removes xmlns attribute - only recommended when embedding svg in DOM">omitNamespace</label>
|
|
250
276
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
277
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="fixHref"
|
|
278
|
+
aria-description="Replaces xlink:href with href – many applications still rely on xlink:href notation!">fixHref</label>
|
|
279
|
+
|
|
280
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="legacyHref"
|
|
281
|
+
aria-description="Since many (non-browser) applications still depend on xlink:href notation you may convert href to xlink:href">legacyHref</label>
|
|
282
|
+
|
|
283
|
+
</p>
|
|
284
|
+
|
|
285
|
+
</details>
|
|
255
286
|
|
|
287
|
+
|
|
288
|
+
<details open>
|
|
289
|
+
<summary class="h3">SVG pathdata conversions</summary>
|
|
290
|
+
<p>
|
|
291
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="arcToCubic"
|
|
292
|
+
aria-description="Arc commands are usually more compact than Béziers at least for semicircles – keep it enabled unless you hate arcs with a passion (... I feel you!)">arcToCubic</label>
|
|
293
|
+
|
|
294
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="quadraticToCubic"
|
|
295
|
+
aria-description="Quadratic Béziers are highly efficient but rarely allow any simplification – keep it enabled unless you want to optimize your quadratic segments"
|
|
296
|
+
checked>quadraticToCubic</label>
|
|
256
297
|
</p>
|
|
298
|
+
|
|
257
299
|
</details>
|
|
258
300
|
|
|
259
301
|
<details open>
|
|
@@ -261,38 +303,36 @@
|
|
|
261
303
|
SVG shape <−> path conversion
|
|
262
304
|
</summary>
|
|
263
305
|
|
|
264
|
-
<!--
|
|
265
|
-
<p>
|
|
266
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="shapesToPaths"
|
|
267
|
-
data-info="convert shapes like circles, rects to path elements">shapesToPaths</label>
|
|
268
|
-
</p>
|
|
269
|
-
-->
|
|
270
|
-
|
|
271
306
|
|
|
272
307
|
<p>
|
|
273
308
|
<label>
|
|
274
|
-
<input type="radio" name="shapeConvert" value="0"
|
|
309
|
+
<input type="radio" name="shapeConvert" aria-description="No conversion" value="0"
|
|
310
|
+
checked>keep
|
|
275
311
|
</label>
|
|
276
312
|
<label>
|
|
277
|
-
<input type="radio" name="shapeConvert"
|
|
313
|
+
<input type="radio" name="shapeConvert"
|
|
314
|
+
aria-description="Convert shapes to paths – shapes are usually very compact. Exceptions are polygon and polyline. Most importantly primitives such as circle, ellipse, rect and line support relative units – not available for paths or polys. But merged shape-paths usually decrease file size."
|
|
315
|
+
value="toPaths">shapesToPaths
|
|
278
316
|
</label>
|
|
279
317
|
<label>
|
|
280
|
-
<input type="radio" name="shapeConvert"
|
|
318
|
+
<input type="radio" name="shapeConvert"
|
|
319
|
+
aria-description="Convert paths to shapes – if applicable"
|
|
320
|
+
value="toShapes">pathsToShapes
|
|
281
321
|
</label>
|
|
282
322
|
</p>
|
|
283
323
|
|
|
284
324
|
<p>
|
|
285
325
|
<label><input type="checkbox" data-type="checkbox-switch" name="convert_rects"
|
|
286
|
-
|
|
326
|
+
aria-description="convert paths to rects if applicable">rects</label>
|
|
287
327
|
|
|
288
328
|
<label><input type="checkbox" data-type="checkbox-switch" name="convert_ellipses"
|
|
289
|
-
|
|
329
|
+
aria-description="convert paths to circles or ellipses if applicable – ellipses/circles are usually more compact than paths – unless you merge paths">ellipses/circles</label>
|
|
290
330
|
|
|
291
331
|
<label><input type="checkbox" data-type="checkbox-switch" name="convert_poly"
|
|
292
|
-
|
|
332
|
+
aria-description="convert paths to polys if applicable – polylines are quite inefficient as they are all absolute">polygons/polylines</label>
|
|
293
333
|
|
|
294
334
|
<label><input type="checkbox" data-type="checkbox-switch" name="convert_lines"
|
|
295
|
-
|
|
335
|
+
aria-description="convert paths to lines if applicable">lines</label>
|
|
296
336
|
</p>
|
|
297
337
|
|
|
298
338
|
|
|
@@ -302,6 +342,7 @@
|
|
|
302
342
|
– so all significant geometrical parameters are described by a discrete number of
|
|
303
343
|
parameters. Elements of this class are <code><circle></code>,
|
|
304
344
|
<code><ellipse></code>, <code><ellipse></code> and <code><line></code>.
|
|
345
|
+
Besides, rimitives support relative percentages as units – handy for fluid layouts.
|
|
305
346
|
The <code><polygon></code> and <code><polyline></code> don't fall into this
|
|
306
347
|
category as the most significant attribute <code><points></code> (specifying the
|
|
307
348
|
vertices) allows an arbitrary array of point. These poly elements can always be expressed
|
|
@@ -314,7 +355,14 @@
|
|
|
314
355
|
</details>
|
|
315
356
|
|
|
316
357
|
<details>
|
|
317
|
-
<summary class="h3">SVG/path
|
|
358
|
+
<summary class="h3">SVG/path transform</summary>
|
|
359
|
+
|
|
360
|
+
<p>
|
|
361
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="convertTransforms"
|
|
362
|
+
aria-description="Converts transforms to hard-coded geometry properties">convertTransforms</label>
|
|
363
|
+
|
|
364
|
+
</p>
|
|
365
|
+
|
|
318
366
|
<p>
|
|
319
367
|
<label>Scale <input type="number" value="1" min="0.00001" max="10000" name="scale"
|
|
320
368
|
step="0.1"></label>
|
|
@@ -324,9 +372,9 @@
|
|
|
324
372
|
</p>
|
|
325
373
|
<p>
|
|
326
374
|
<label><input type="checkbox" data-type="checkbox-switch" name="crop"
|
|
327
|
-
|
|
375
|
+
aria-description="crops svgs to tight bbox">crop</label>
|
|
328
376
|
<label><input type="checkbox" data-type="checkbox-switch" name="alignToOrigin"
|
|
329
|
-
|
|
377
|
+
aria-description="aligns path to x/y 0 origin">alignToOrigin</label>
|
|
330
378
|
|
|
331
379
|
</p>
|
|
332
380
|
|
|
@@ -339,84 +387,90 @@
|
|
|
339
387
|
|
|
340
388
|
<details open>
|
|
341
389
|
<summary class="h3">Simplification</summary>
|
|
390
|
+
|
|
391
|
+
<p>
|
|
392
|
+
<label>tolerance<input type="number" name="tolerance" min="0.1" max="10" step="0.1" value="1"
|
|
393
|
+
aria-description="Higher tolerance = sloppier approximations and more distortions – default 1"></label>
|
|
394
|
+
</p>
|
|
395
|
+
|
|
342
396
|
<p>
|
|
343
397
|
<label><input type="checkbox" data-type="checkbox-switch" name="simplifyBezier"
|
|
398
|
+
aria-description="Tries to combine adjacent Bézier commands"
|
|
344
399
|
checked>simplifyBezier</label>
|
|
345
400
|
<label><input type="checkbox" data-type="checkbox-switch" name="removeZeroLength"
|
|
401
|
+
aria-description="Removes zero length segments – often accidentally added by apps"
|
|
346
402
|
checked>removeZeroLength</label>
|
|
347
403
|
|
|
404
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="optimizeOrder"
|
|
405
|
+
aria-description="Optimizes command order preferring top-left sorting and avoiding start points between adjacent Bézier segments"
|
|
406
|
+
checked>optimizeOrder</label>
|
|
407
|
+
|
|
348
408
|
<label><input type="checkbox" data-type="checkbox-switch" name="refineClosing"
|
|
409
|
+
aria-description="Tries to replace a closing lineto with a Z command – ideally we can ditch one command"
|
|
349
410
|
checked>refineClosing</label>
|
|
350
411
|
|
|
351
412
|
|
|
352
413
|
<label><input type="checkbox" data-type="checkbox-switch" name="removeColinear"
|
|
414
|
+
aria-description="Removes excessive colinear lineto commands – mostly affects line sequences or polygon inputs"
|
|
353
415
|
checked>removeColinear</label>
|
|
354
416
|
|
|
355
417
|
<label><input type="checkbox" data-type="checkbox-switch" name="flatBezierToLinetos"
|
|
418
|
+
aria-description="Converts flat Bézier commands to simpler linetos"
|
|
356
419
|
checked>flatBezierToLinetos</label>
|
|
357
420
|
|
|
358
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="optimizeOrder"
|
|
359
|
-
checked>optimizeOrder</label>
|
|
360
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="keepExtremes"
|
|
361
|
-
checked>keepExtremes</label>
|
|
362
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="keepCorners"
|
|
363
|
-
checked>keepCorners</label>
|
|
364
|
-
|
|
365
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="keepInflections"
|
|
366
|
-
data-info="retain inflections e.g spine of an S shape">keepInflections</label>
|
|
367
|
-
|
|
368
421
|
<!--
|
|
369
422
|
<label><input type="checkbox" name="extrapolateDominant"
|
|
370
|
-
|
|
423
|
+
aria-description="extrapolates dominant bezier segment – rather sloppy">extrapolateDominant</label>
|
|
371
424
|
-->
|
|
372
425
|
|
|
373
426
|
<label><input type="checkbox" data-type="checkbox-switch" name="revertToQuadratics"
|
|
374
|
-
|
|
427
|
+
aria-description="Reverts cubic to quadratic Béziers if applicable"
|
|
375
428
|
checked>revertToQuadratics</label>
|
|
376
429
|
|
|
377
|
-
<!--
|
|
378
|
-
<label><input type="checkbox" name="reverse">try with reversed drawing direction</label>
|
|
379
|
-
|
|
380
|
-
<label><input type="checkbox" name="multipass"
|
|
381
|
-
data-info="takes better simplification – slower">multipass</label>
|
|
382
|
-
-->
|
|
383
|
-
|
|
384
430
|
</p>
|
|
385
431
|
</details>
|
|
386
432
|
|
|
387
433
|
|
|
388
|
-
<details
|
|
389
|
-
<summary class="h3">
|
|
434
|
+
<details>
|
|
435
|
+
<summary class="h3">Limit simplification</summary>
|
|
390
436
|
<p>
|
|
391
|
-
<label
|
|
392
|
-
|
|
393
|
-
|
|
437
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="keepExtremes"
|
|
438
|
+
aria-description="Extremes (tangent angle is horizontal or vertical) are visually significant – disable it only if you know what you're doing"
|
|
439
|
+
checked>keepExtremes</label>
|
|
440
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="keepCorners"
|
|
441
|
+
aria-description="Corners (adjacent tangent angle are rather »sharp«) are visually significant – disable it only if you know what you're doing"
|
|
442
|
+
checked>keepCorners</label>
|
|
394
443
|
|
|
444
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="keepInflections"
|
|
445
|
+
aria-description="Retain inflections e.g spine of an S shape – mainly useful for design/editing purposes">keepInflections</label>
|
|
446
|
+
</p>
|
|
395
447
|
</details>
|
|
396
448
|
|
|
397
449
|
|
|
398
|
-
|
|
399
450
|
<details>
|
|
400
451
|
<summary class="h3">Advanced simplifications</summary>
|
|
401
452
|
<p>
|
|
402
453
|
|
|
403
454
|
<label><input type="checkbox" data-type="checkbox-switch" name="cubicToArc"
|
|
404
|
-
|
|
455
|
+
aria-description="Replaces Bézier segments by elliptic arc A commands where applicable – can reduce complexity for semi- or full circles">cubicToArc</label>
|
|
405
456
|
|
|
406
457
|
<label><input type="checkbox" data-type="checkbox-switch" name="removeOrphanSubpaths"
|
|
407
|
-
|
|
408
|
-
checked>removeOrphanSubpaths</label>
|
|
458
|
+
aria-description="Remove orphaned M commands not connecting to lines or curve segments">removeOrphanSubpaths</label>
|
|
409
459
|
<label><input type="checkbox" data-type="checkbox-switch"
|
|
460
|
+
aria-description="Tries to combine commands close to an adjacent x/y extreme segment"
|
|
410
461
|
name="refineExtremes">refineExtremes</label>
|
|
411
462
|
<label><input type="checkbox" data-type="checkbox-switch"
|
|
463
|
+
aria-description="replaces Bézier segments enclosed by linetos with single quadratic commands – handy to reduce overly complex tiny corner roundings"
|
|
412
464
|
name="simplifyCorners">simplifyCorners</label>
|
|
413
465
|
<label><input type="checkbox" data-type="checkbox-switch"
|
|
414
466
|
name="simplifyRound">simplifyRound</label>
|
|
415
|
-
<label><input type="checkbox" data-type="checkbox-switch"
|
|
467
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
468
|
+
aria-description="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"
|
|
469
|
+
name="addExtremes">addExtremes</label>
|
|
416
470
|
|
|
417
471
|
<!--
|
|
418
472
|
<label><input type="checkbox" name="redraw"
|
|
419
|
-
|
|
473
|
+
aria-description="try to redraw messed up paths based on extremes, semiextermes and corners">redraw</label>
|
|
420
474
|
|
|
421
475
|
|
|
422
476
|
<label class="dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
@@ -434,102 +488,114 @@
|
|
|
434
488
|
<summary class="h3">Path directions</summary>
|
|
435
489
|
<p>
|
|
436
490
|
<label><input type="checkbox" data-type="checkbox-switch" name="reversePath"
|
|
437
|
-
|
|
491
|
+
aria-description="Reverses path drawing direction - sometimes handy for line animations">reversePath</label>
|
|
438
492
|
|
|
439
493
|
<label><input type="checkbox" data-type="checkbox-switch" name="fixDirections"
|
|
440
|
-
|
|
494
|
+
aria-description="Alternates sub path directions to fulfill non-zero rule. Makes fill-rule attribute obsolete and render correct in other environments e.g when converting to fonts">fixDirections</label>
|
|
441
495
|
</p>
|
|
442
496
|
</details>
|
|
443
497
|
|
|
444
|
-
|
|
498
|
+
|
|
499
|
+
<details>
|
|
500
|
+
<summary class="h3">Polygon</summary>
|
|
501
|
+
<p>
|
|
502
|
+
<label class="--dsp-debug"><input type="checkbox" data-type="checkbox-switch" name="smoothPoly"
|
|
503
|
+
aria-description="Converts a polygon to smooth cubic beziers using the Philip J. Schneider curve fitting algorithm">smoothPoly</label>
|
|
504
|
+
|
|
505
|
+
<label class="--dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
506
|
+
aria-description="Converts a path to polygon at specified precision"
|
|
507
|
+
name="toPolygon">toPolygon</label>
|
|
508
|
+
</p>
|
|
509
|
+
<p>
|
|
510
|
+
<label>precisionPoly<input type="number" name="precisionPoly" min="0.1" max="100" step="0.1"
|
|
511
|
+
value="1"
|
|
512
|
+
aria-description="Precision for polygon approximation – higher values add more vertices"></label>
|
|
513
|
+
</p>
|
|
514
|
+
|
|
515
|
+
<p class="h4">Polygon simplification</p>
|
|
516
|
+
<p>
|
|
517
|
+
<label class="">simplifyRDP<input type="number" min="0" max="500" step="0.1" value="0"
|
|
518
|
+
name="simplifyRDP" aria-description="Reduce vertices via Ramer-Douglas-Peucker"></label>
|
|
519
|
+
</p>
|
|
520
|
+
<p>
|
|
521
|
+
<label class="">simplifyRD<input type="number" min="0" max="500" step="0.1" value="0"
|
|
522
|
+
name="simplifyRD" aria-description="Reduce vertices via radial distance"></label>
|
|
523
|
+
</p>
|
|
524
|
+
|
|
525
|
+
<p>
|
|
526
|
+
<label class=""><input type="radio" name="polyFormat" value="object" checked>object</label>
|
|
527
|
+
<label class=""><input type="radio" name="polyFormat" value="array">array</label>
|
|
528
|
+
<label class=""><input type="radio" name="polyFormat" value="string">string</label>
|
|
529
|
+
<!--
|
|
530
|
+
<label class=""><input type="radio" name="polyFormat" value="d">pathdata</label>
|
|
531
|
+
-->
|
|
532
|
+
</p>
|
|
533
|
+
|
|
534
|
+
</details>
|
|
535
|
+
|
|
536
|
+
|
|
537
|
+
<details open>
|
|
445
538
|
<summary class="h3">SVG output settings</summary>
|
|
446
539
|
<p>
|
|
447
540
|
<label><input type="checkbox" data-type="checkbox-switch" name="toRelative"
|
|
541
|
+
aria-description="Converts all commands to relative – reduces file size"
|
|
448
542
|
checked>toRelative</label>
|
|
449
543
|
<label><input type="checkbox" data-type="checkbox-switch" name="toShorthands"
|
|
544
|
+
aria-description="Converts all commands to shorthand when applicable – reduces file size"
|
|
450
545
|
checked>toShorthands</label>
|
|
451
546
|
<label><input type="checkbox" data-type="checkbox-switch" name="lineToCubic"
|
|
452
|
-
|
|
547
|
+
aria-description="converts lines to cubics – helpful for morphing animations">lineToCubic</label>
|
|
453
548
|
|
|
454
549
|
</p>
|
|
455
550
|
|
|
456
|
-
<
|
|
551
|
+
<details>
|
|
552
|
+
<summary class="h4" data-summary='{"icon":"question"}'>SVG string optimization</summary>
|
|
553
|
+
<ul class="ul-bll">
|
|
554
|
+
<li><strong>Minify</strong> = maximum string minification – my lead to problems in older
|
|
555
|
+
applications!</li>
|
|
556
|
+
<li><strong>Verbose</strong> = don't omit command type tokens</li>
|
|
557
|
+
<li><strong>Beautify</strong>strong> = don't omit command type tokens and separate commands
|
|
558
|
+
by new lines – handy for educational usage</li>
|
|
559
|
+
</ul>
|
|
560
|
+
</details>
|
|
561
|
+
|
|
457
562
|
<p><label><input type="radio" name="minifyD" value="0" checked>minify</label>
|
|
458
563
|
<label><input type="radio" name="minifyD" value="1">verbose</label>
|
|
459
564
|
<label><input type="radio" name="minifyD" value="2">beautify</label>
|
|
460
565
|
</p>
|
|
461
566
|
<p>
|
|
462
567
|
<label><input type="checkbox" data-type="checkbox-switch" name="autoAccuracy"
|
|
463
|
-
|
|
568
|
+
aria-description="Calculates a suitable floating point precision for coordinate rounding. Slightly conservative – decreasing by one decimal may work without significant distortions"
|
|
464
569
|
checked>autoAccuracy</label>
|
|
465
570
|
</p>
|
|
466
571
|
|
|
467
|
-
<!--
|
|
468
|
-
<p>
|
|
469
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="roundSub"
|
|
470
|
-
data-info="takes an estimated suitable floating point accuracy based on smallest segment"
|
|
471
|
-
>roundSub</label>
|
|
472
|
-
</p>
|
|
473
|
-
-->
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
572
|
<p>
|
|
478
573
|
<label class="wdt-100">decimals <input type="number" name="decimals" min="0" value="1"
|
|
479
|
-
|
|
574
|
+
aria-description="Manual floating point rounding precision – overriden when autoAccuracy is enabled"></label>
|
|
480
575
|
</p>
|
|
481
576
|
</details>
|
|
482
577
|
|
|
483
|
-
<p>
|
|
484
|
-
<label>Output SVG
|
|
485
|
-
<textarea class="outputSvg code" name="dOutput" id="outputSvg" data-tools="size copy"
|
|
486
|
-
data-file="simple.svg"></textarea>
|
|
487
|
-
</label>
|
|
488
|
-
</p>
|
|
489
|
-
|
|
490
|
-
<details>
|
|
491
|
-
<summary class="h3">Polygon</summary>
|
|
492
|
-
<p>
|
|
493
|
-
<label class="--dsp-debug"><input type="checkbox" data-type="checkbox-switch" name="smoothPoly"
|
|
494
|
-
data-info="Converts a polygon to smooth cubic beziers using the Philip J. Schneider curve fitting algorithm">smoothPoly</label>
|
|
495
|
-
|
|
496
|
-
<label class="--dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
497
|
-
name="toPolygon">toPolygon</label>
|
|
498
|
-
</p>
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
<p>
|
|
502
|
-
<label>precisionPoly<input type="number" name="precisionPoly" min="0.1" max="100" step="0.1"
|
|
503
|
-
value="1"
|
|
504
|
-
data-info="Precision for polygon approximation – higher values add more vertices"></label>
|
|
505
|
-
</p>
|
|
506
578
|
|
|
579
|
+
<details open>
|
|
580
|
+
<summary class="h3">Output</summary>
|
|
507
581
|
|
|
508
|
-
<p class="h4">Polygon simplification</p>
|
|
509
|
-
<p>
|
|
510
|
-
<label class="">simplifyRDP<input type="number" min="0" max="500" step="1" value="0"
|
|
511
|
-
name="simplifyRDP" data-info="reduce vertices via Ramer-Douglas-Peucker"></label>
|
|
512
|
-
</p>
|
|
513
582
|
<p>
|
|
514
|
-
<label
|
|
515
|
-
|
|
583
|
+
<label>Output SVG
|
|
584
|
+
<textarea class="outputSvg code" name="dOutput" id="outputSvg" data-tools="size copy"
|
|
585
|
+
data-file="simple.svg"></textarea>
|
|
586
|
+
</label>
|
|
516
587
|
</p>
|
|
517
588
|
|
|
518
|
-
|
|
519
|
-
<p>
|
|
520
|
-
<label class=""><input type="radio" name="polyFormat" value="object" checked>object</label>
|
|
521
|
-
<label class=""><input type="radio" name="polyFormat" value="array">array</label>
|
|
522
|
-
<label class=""><input type="radio" name="polyFormat" value="string">string</label>
|
|
523
|
-
</p>
|
|
524
589
|
<p>
|
|
525
590
|
<label>Output Polygon
|
|
526
591
|
<textarea class="outputPoly code" name="polyOut" id="polyOut" data-tools="size copy"
|
|
527
592
|
data-ignore="true" readonly data-file="polygon.txt"></textarea>
|
|
528
593
|
</label>
|
|
529
594
|
</p>
|
|
530
|
-
|
|
531
595
|
</details>
|
|
532
596
|
|
|
597
|
+
|
|
598
|
+
|
|
533
599
|
<details>
|
|
534
600
|
<summary class="h3">Settings</summary>
|
|
535
601
|
<p>
|
|
@@ -538,7 +604,8 @@
|
|
|
538
604
|
readonly></textarea>
|
|
539
605
|
</label>
|
|
540
606
|
<label><input type="checkbox" data-type="checkbox-switch" name="omitDefaults"
|
|
541
|
-
|
|
607
|
+
aria-description="only include settings that are not defaults"
|
|
608
|
+
checked>omitDefaults</label>
|
|
542
609
|
|
|
543
610
|
</p>
|
|
544
611
|
</details>
|
|
@@ -713,136 +780,8 @@
|
|
|
713
780
|
|
|
714
781
|
|
|
715
782
|
<dialog class="--dialog sr-only" id="about">
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
<p>These params control shich simplifications are applied. The default settings aim at a safe or balanced
|
|
719
|
-
performance-to-minification ratio. However if your main goal is to get the most compact result you can
|
|
720
|
-
enable additional options which also require more processing time.</p>
|
|
721
|
-
|
|
722
|
-
<table>
|
|
723
|
-
<thead>
|
|
724
|
-
<tr>
|
|
725
|
-
<th>parameter</th>
|
|
726
|
-
<th>effect</th>
|
|
727
|
-
<th>type</th>
|
|
728
|
-
<th>default</th>
|
|
729
|
-
</tr>
|
|
730
|
-
</thead>
|
|
731
|
-
<tbody>
|
|
732
|
-
<tr>
|
|
733
|
-
<td>simplifyBezier</td>
|
|
734
|
-
<td>main Bézier simplification. When disabled you get the common optimization similar to SVGO
|
|
735
|
-
(rounding, to all relative and shorthand conversions)</td>
|
|
736
|
-
<td>Boolean</td>
|
|
737
|
-
<td>true</td>
|
|
738
|
-
</tr>
|
|
739
|
-
<tr>
|
|
740
|
-
<td>tolerance</td>
|
|
741
|
-
<td>increase or decrease tolerance: higher values allow more distortions, lower ones more shape
|
|
742
|
-
fidelity</td>
|
|
743
|
-
<td>Number</td>
|
|
744
|
-
<td>1</td>
|
|
745
|
-
</tr>
|
|
746
|
-
<tr>
|
|
747
|
-
<td>optimizeOrder</td>
|
|
748
|
-
<td>reorders commands to get more adjacent simplification candidates. Improves optimization
|
|
749
|
-
efficiency</td>
|
|
750
|
-
<td>Boolean</td>
|
|
751
|
-
<td>true</td>
|
|
752
|
-
</tr>
|
|
753
|
-
<tr>
|
|
754
|
-
<td>removeColinear</td>
|
|
755
|
-
<td>removes unnecessary zero-length or colinear lineto commands</td>
|
|
756
|
-
<td>Boolean</td>
|
|
757
|
-
<td>true</td>
|
|
758
|
-
</tr>
|
|
759
|
-
<tr>
|
|
760
|
-
<td>flatBezierToLinetos</td>
|
|
761
|
-
<td>replaces flat Béziers with linetos which also can be stripped via previous colinear removal</td>
|
|
762
|
-
<td>Boolean</td>
|
|
763
|
-
<td>true</td>
|
|
764
|
-
</tr>
|
|
765
|
-
<tr>
|
|
766
|
-
<td>revertToQuadratics</td>
|
|
767
|
-
<td>replaces cubic Béziers with quadratic (more compact) ones when applicable</td>
|
|
768
|
-
<td>Boolean</td>
|
|
769
|
-
<td>true</td>
|
|
770
|
-
</tr>
|
|
771
|
-
<tr>
|
|
772
|
-
<td>keepExtremes</td>
|
|
773
|
-
<td>skips simplification accross x/y extrema – improves shape fidelity</td>
|
|
774
|
-
<td>Boolean</td>
|
|
775
|
-
<td>true</td>
|
|
776
|
-
</tr>
|
|
777
|
-
<tr>
|
|
778
|
-
<td>keepCorners</td>
|
|
779
|
-
<td>skips simplification corners – improves shape fidelity</td>
|
|
780
|
-
<td>Boolean</td>
|
|
781
|
-
<td>true</td>
|
|
782
|
-
</tr>
|
|
783
|
-
<tr>
|
|
784
|
-
<td>keepInflections</td>
|
|
785
|
-
<td>retains commands introducing direction changes – adds complexity but may help for editing in a
|
|
786
|
-
graphic application</td>
|
|
787
|
-
<td>Boolean</td>
|
|
788
|
-
<td>false</td>
|
|
789
|
-
</tr>
|
|
790
|
-
</tbody>
|
|
791
|
-
</table>
|
|
792
|
-
|
|
793
|
-
<h3>Advanced simplifications</h3>
|
|
794
|
-
<table>
|
|
795
|
-
<thead>
|
|
796
|
-
<tr>
|
|
797
|
-
<th>parameter</th>
|
|
798
|
-
<th>effect</th>
|
|
799
|
-
<th>type</th>
|
|
800
|
-
<th>default</th>
|
|
801
|
-
</tr>
|
|
802
|
-
</thead>
|
|
803
|
-
<tbody>
|
|
804
|
-
<tr>
|
|
805
|
-
<td>refineExtremes</td>
|
|
806
|
-
<td>tries to combine commands close to an adjacent x/y extreme segment</td>
|
|
807
|
-
<td>Boolean</td>
|
|
808
|
-
<td>false</td>
|
|
809
|
-
</tr>
|
|
810
|
-
<tr>
|
|
811
|
-
<td>addExtremes</td>
|
|
812
|
-
<td>adds commands at x/y extrema – adds complexity but may help for editing in a graphic application
|
|
813
|
-
– when using this option enable <code>refineExtremes</code> as well to avoid tiny adjacent
|
|
814
|
-
segments</td>
|
|
815
|
-
<td>Boolean</td>
|
|
816
|
-
<td>false</td>
|
|
817
|
-
</tr>
|
|
818
|
-
<tr>
|
|
819
|
-
<td>simplifyCorners</td>
|
|
820
|
-
<td>replaces Bézier segments enclosed by linetos with single quadratic commands – handy to reduce
|
|
821
|
-
overly complex tiny corner roundings. See example in <a
|
|
822
|
-
href="https://herrstrietzel.github.io/svg-path-simplify?samples=fontawesome_gears&refineExtremes=true&simplifyCorners=true"
|
|
823
|
-
rel="nofollow">webapp</a></td>
|
|
824
|
-
<td>Boolean</td>
|
|
825
|
-
<td>false</td>
|
|
826
|
-
</tr>
|
|
827
|
-
<tr>
|
|
828
|
-
<td>cubicToArc</td>
|
|
829
|
-
<td>replaces Bézier segments by elliptic arc <code>A</code> commands where applicable – can reduce
|
|
830
|
-
complexity for semi- or full circles</td>
|
|
831
|
-
<td>Boolean</td>
|
|
832
|
-
<td>false</td>
|
|
833
|
-
</tr>
|
|
834
|
-
<tr>
|
|
835
|
-
<td>simplifyRound</td>
|
|
836
|
-
<td>replaces small round segments encloses by linetos – helps to simplify shapes like gears/cogs
|
|
837
|
-
</td>
|
|
838
|
-
<td>Boolean</td>
|
|
839
|
-
<td>false</td>
|
|
840
|
-
</tr>
|
|
841
|
-
</tbody>
|
|
842
|
-
</table>
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
783
|
+
<div class="md-cnt" data-md="./docs/api.md">
|
|
784
|
+
</div>
|
|
846
785
|
</dialog>
|
|
847
786
|
|
|
848
787
|
<!--
|