svg-path-simplify 0.3.4 → 0.3.5
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/.github/ISSUE_TEMPLATE/bug_report.yml +28 -0
- package/.github/ISSUE_TEMPLATE/feature_request.yml +35 -0
- package/dist/svg-path-simplify.esm.js +30 -9
- package/dist/svg-path-simplify.esm.min.js +1 -1
- package/dist/svg-path-simplify.js +30 -9
- package/dist/svg-path-simplify.min.js +1 -1
- package/index.html +404 -112
- package/package.json +1 -1
- package/site.webmanifest +21 -0
- package/src/pathSimplify-main.js +4 -2
- package/src/svg_flatten_transforms.js +43 -0
- package/src/svgii/svg-styles-getTransforms.js +43 -5
- package/src/svgii/svg-styles-to-attributes.js +81 -3
- package/src/svgii/svg_cleanup.js +12 -1
package/index.html
CHANGED
|
@@ -4,16 +4,55 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>SVG path
|
|
8
|
-
<meta name="description"
|
|
7
|
+
<title>Simplify SVG files and path data</title>
|
|
8
|
+
<meta name="description"
|
|
9
|
+
content="Optimizes SVG data by removing excessive commands and applying markup minifications such as coordinate rounding, relative and applicable shorthand commands">
|
|
9
10
|
|
|
11
|
+
<meta property="og:title" content="Simplify SVG files and path data">
|
|
12
|
+
<meta property="og:description"
|
|
13
|
+
content="Optimizes SVG data by removing excessive commands and applying markup minifications such as coordinate rounding, relative and applicable shorthand commands">
|
|
14
|
+
<meta property="og:image"
|
|
15
|
+
content="https://herrstrietzel.github.io/svg-path-simplify/demo/img/repository-open-graph-template.png">
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<script type="application/ld+json">
|
|
19
|
+
{
|
|
20
|
+
"@context": "https://schema.org",
|
|
21
|
+
"@type": "SoftwareSourceCode",
|
|
22
|
+
"name": "SVG Path Simplify",
|
|
23
|
+
"codeRepository": "https://github.com/herrstrietzel/svg-path-simplify",
|
|
24
|
+
"programmingLanguage": "JavaScript",
|
|
25
|
+
"description": "A JavaScript library to simplify and optimize SVG path data."
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
<link rel="preload" href="demo/css/IBM-Plex-Sans_static/fonts/IBM-Plex-Sans/IBMPlexSans_latin_400.woff2" as="font"
|
|
31
|
+
type="font/woff2" crossorigin="anonymous">
|
|
32
|
+
<link rel="preload"
|
|
33
|
+
href="demo/css/IBM-Plex-Sans-Condensed_static/fonts/IBM-Plex-Sans-Condensed/IBMPlexSansCondensed_latin_700.woff2"
|
|
34
|
+
as="font" type="font/woff2" crossorigin="anonymous">
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
<!--
|
|
38
|
+
<link rel="stylesheet" href="demo/css/IBM-Plex-Sans_VF/css/IBM-Plex-Sans.css">
|
|
39
|
+
-->
|
|
10
40
|
|
|
11
41
|
<link rel="icon" href="./favicon.svg" type="image/svg+xml">
|
|
42
|
+
<link rel="icon" type="image/png" href="./demo/favicon/favicon-96x96.png" sizes="96x96" />
|
|
43
|
+
<!--
|
|
44
|
+
<link rel="shortcut icon" href="./demo/favicon/favicon.ico" />
|
|
45
|
+
-->
|
|
46
|
+
<link rel="apple-touch-icon" sizes="180x180" href="./demo/favicon/apple-touch-icon.png" />
|
|
47
|
+
<meta name="apple-mobile-web-app-title" content="svg-path-simplify" />
|
|
48
|
+
<link rel="manifest" href="./site.webmanifest" />
|
|
49
|
+
|
|
50
|
+
|
|
12
51
|
<link rel="mask-icon" href="favicon.svg" color="#000000">
|
|
13
|
-
<meta name="theme-color" content="#
|
|
52
|
+
<meta name="theme-color" content="#f6f6f4">
|
|
53
|
+
|
|
14
54
|
|
|
15
55
|
<!--
|
|
16
|
-
|
|
17
56
|
<link rel="stylesheet" href="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.css">
|
|
18
57
|
<script src="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.js" defer></script>
|
|
19
58
|
|
|
@@ -28,37 +67,33 @@
|
|
|
28
67
|
<script src="demo/samples.js" defer></script>
|
|
29
68
|
|
|
30
69
|
|
|
31
|
-
|
|
32
70
|
<!-- UI helpers -->
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/enhance-inputs@latest/dist/enhanceInputs.min.css">
|
|
36
|
-
<script src="https://cdn.jsdelivr.net/npm/enhance-inputs@latest/dist/enhanceInputs.min.js" defer></script>
|
|
37
|
-
|
|
38
|
-
<!--
|
|
39
|
-
<link rel="stylesheet" href="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.css">
|
|
40
|
-
<script src="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.js" defer></script>
|
|
41
|
-
|
|
42
|
-
-->
|
|
71
|
+
<link rel="preload" href="https://cdn.jsdelivr.net/npm/enhance-inputs@latest/dist/enhanceInputs.min.css"
|
|
72
|
+
as="style" />
|
|
43
73
|
|
|
44
74
|
|
|
45
|
-
|
|
75
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/enhance-inputs@latest/dist/enhanceInputs.min.css">
|
|
76
|
+
<script src="https://cdn.jsdelivr.net/npm/enhance-inputs@latest/dist/enhanceInputs.min.js" defer></script>
|
|
77
|
+
<!--
|
|
78
|
+
|
|
79
|
+
<link rel="stylesheet" href="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.css">
|
|
80
|
+
<script src="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.js" defer></script>
|
|
81
|
+
-->
|
|
46
82
|
|
|
47
83
|
|
|
48
|
-
<script src="demo/lib/elzoomo/elzoomo.js" defer></script>
|
|
49
84
|
|
|
50
85
|
<!--
|
|
51
86
|
<script src="https://cdn.jsdelivr.net/npm/svg-path-simplify@0.1.2/dist/svg-path-simplify.min.js" defer></script>
|
|
52
87
|
-->
|
|
53
88
|
|
|
89
|
+
<script src="dist/svg-path-simplify.min.js" defer></script>
|
|
90
|
+
<link rel="stylesheet" href="demo/css/app.css">
|
|
54
91
|
|
|
55
|
-
|
|
56
|
-
<script src="dist/svg-path-simplify.js" defer></script>
|
|
92
|
+
<script src="demo/lib/elzoomo/elzoomo.min.js" defer></script>
|
|
57
93
|
<script src="demo/app.js" type="module"></script>
|
|
94
|
+
<script src="https://cdn.jsdelivr.net/npm/uzip@0.20201231.0/UZIP.min.js" defer></script>
|
|
58
95
|
|
|
59
96
|
|
|
60
|
-
<link rel="stylesheet" href="demo/css/app.css">
|
|
61
|
-
|
|
62
97
|
</head>
|
|
63
98
|
|
|
64
99
|
|
|
@@ -69,24 +104,78 @@
|
|
|
69
104
|
<div class="grd-main hgh-100vh grd grd-md-3 grd-ld-5 gap-0">
|
|
70
105
|
<div class="sidebar-wrap scrollbar scroll-content scroll-track">
|
|
71
106
|
|
|
107
|
+
<header class="header-left dsp-inl-blc">
|
|
108
|
+
<label class="navToggle"><input type="checkbox" name="showNav0" class="showNav0 showNav" id="showNav0"
|
|
109
|
+
data-icon="adjustments-vertical" checked title="show settings" data-sync="showNav"></label>
|
|
110
|
+
</header>
|
|
111
|
+
|
|
112
|
+
|
|
72
113
|
<!--toolbars-->
|
|
73
114
|
<aside class="aside aside-1 hgh-100 aside scrollbar scroll-content-ld scroll-track pdd-1em pos-rlt">
|
|
74
|
-
|
|
75
|
-
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
<p class="txt-cnt mrg-0">
|
|
120
|
+
<img class="icn-logo " width="100" height="100"
|
|
121
|
+
src="https://herrstrietzel.github.io/svg-path-simplify/favicon.svg" alt="svg-path-simplify">
|
|
76
122
|
</p>
|
|
77
123
|
|
|
78
|
-
<h1 class="txt-cnt">Simplify
|
|
79
|
-
<p>
|
|
124
|
+
<h1 class="txt-cnt h1">Simplify SVG files and path data</h1>
|
|
125
|
+
<h2 class="p txt-cnt">Optimizes SVG data by removing excessive commands and applying markup
|
|
126
|
+
minifications such as coordinate rounding, relative and applicable shorthand commands</h2>
|
|
127
|
+
|
|
128
|
+
<!--
|
|
129
|
+
<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>
|
|
130
|
+
<p>Enter your SVG pathData or complete file markup or upload SVG files</p>
|
|
131
|
+
-->
|
|
132
|
+
|
|
80
133
|
|
|
81
134
|
<p class="--btn-neg" data-ui="reset"></p>
|
|
82
135
|
|
|
136
|
+
<details>
|
|
137
|
+
<summary class="h3">Privacy</summary>
|
|
138
|
+
|
|
139
|
+
<h3>Simplification</h3>
|
|
140
|
+
<p>Enter your SVG pathData or complete file markup or upload SVG files.</p>
|
|
141
|
+
<p class="fnt-wgh-700">All data is processed 100% client-side – no data is transferred or analyzed
|
|
142
|
+
by any third-party service during simplification.</p>
|
|
143
|
+
|
|
144
|
+
<h3>Sharing and editing</h3>
|
|
145
|
+
<ul>
|
|
146
|
+
<li>Codepen – sends your current data to <a href="https://codepen.io">codepen.io</a> and creates a new pen
|
|
147
|
+
for testing purposes</li>
|
|
148
|
+
<li>Edit – sends data to <a href="https://yqnn.github.io/svg-path-editor">svg-path-editor</a> for further
|
|
149
|
+
path node editing</li>
|
|
150
|
+
</ul>
|
|
151
|
+
|
|
152
|
+
<h3>External scripts</h3>
|
|
153
|
+
<p>The webapp loads these external scripts from jsdelivr</p>
|
|
154
|
+
<ul>
|
|
155
|
+
<li><a href="https://github.com/WebReflection/linkedom">linkedom</a>
|
|
156
|
+
– used for web worker based multi file
|
|
157
|
+
processing</li>
|
|
158
|
+
<li><a href="https://github.com/photopea/UZIP.js">UZIP</a>
|
|
159
|
+
– for multifile zip exports</li>
|
|
160
|
+
<li><a href="https://github.com/herrstrietzel/enhance-inputs">enhance-inputs</a>
|
|
161
|
+
– used for GUI input
|
|
162
|
+
styling and updating logic</li>
|
|
163
|
+
</ul>
|
|
164
|
+
|
|
165
|
+
<h3>Local Storage</h3>
|
|
166
|
+
<p>Your current settings as well as your input SVG data is stored in local Storage. This provides to apply the same settings to multiple files after reloads. You can delete this settings cache via the reset settings button.</p>
|
|
167
|
+
<p>You image data is never transferred to the github server.</p>
|
|
168
|
+
|
|
169
|
+
</details>
|
|
170
|
+
|
|
171
|
+
|
|
83
172
|
<p><input type="file" class="dsp-non --btn-neg" id="inputFile" name="svgFile" value="upload"
|
|
84
173
|
data-label="Upload SVG file/s" accept=".svg" data-ignore="true" multiple></p>
|
|
85
174
|
|
|
86
175
|
|
|
87
176
|
<p>
|
|
88
177
|
<label for="inputSamples" class="sr-only"> Select samples</label>
|
|
89
|
-
|
|
178
|
+
<select name="samples" id="inputSamples" data-options="samples"></select>
|
|
90
179
|
</p>
|
|
91
180
|
|
|
92
181
|
|
|
@@ -98,38 +187,53 @@
|
|
|
98
187
|
<details open>
|
|
99
188
|
<summary class="h3">SVG input normalization</summary>
|
|
100
189
|
<p>
|
|
101
|
-
<label><input type="checkbox" name="arcToCubic">arcToCubic</label>
|
|
102
|
-
<label><input type="checkbox" name="quadraticToCubic"
|
|
190
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="arcToCubic">arcToCubic</label>
|
|
191
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="quadraticToCubic"
|
|
192
|
+
checked>quadraticToCubic</label>
|
|
103
193
|
|
|
104
194
|
<!--
|
|
105
195
|
|
|
106
196
|
<label><input type="checkbox" name="removePrologue" checked>removePrologue</label>
|
|
107
197
|
-->
|
|
108
198
|
|
|
109
|
-
<label><input type="checkbox" name="removeNameSpaced"
|
|
110
|
-
|
|
111
|
-
|
|
199
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeNameSpaced"
|
|
200
|
+
checked>removeNameSpaced</label>
|
|
201
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="cleanupSVGAtts" checked data-info="remove SVG non-essential attributes">cleanupSVGAtts</label>
|
|
202
|
+
|
|
203
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="cleanUpStrokes" checked data-info="removes stroke attributes when stroke color is missing">cleanUpStrokes</label>
|
|
204
|
+
|
|
205
|
+
|
|
112
206
|
|
|
113
|
-
<label><input type="checkbox" name="fixHref" checked
|
|
207
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="fixHref" checked
|
|
114
208
|
data-info="replaces xlibnk:href with href">fixHref</label>
|
|
115
209
|
|
|
116
210
|
|
|
117
|
-
<label><input type="checkbox" name="removeHidden"
|
|
211
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeHidden"
|
|
212
|
+
checked>removeHidden</label>
|
|
118
213
|
|
|
119
214
|
|
|
120
|
-
<label><input type="checkbox" name="stylesToAttributes"
|
|
215
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="stylesToAttributes"
|
|
121
216
|
data-info="replaces inline styles with SVG atributes and removes obsolete attributes and styles">stylesToAttributes</label>
|
|
122
217
|
|
|
123
|
-
|
|
124
|
-
<label><input type="checkbox" name="
|
|
218
|
+
|
|
219
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="mergePaths">mergePaths</label>
|
|
220
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="shapesToPaths"
|
|
125
221
|
data-info="convert shapes like circles, rects to path elements">shapesToPaths</label>
|
|
126
222
|
|
|
127
|
-
<label><input type="checkbox"
|
|
128
|
-
|
|
129
|
-
<label><input type="checkbox" name="
|
|
130
|
-
<label><input type="checkbox"
|
|
223
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
224
|
+
name="removeDimensions">removeDimensions</label>
|
|
225
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeIds">removeIds</label>
|
|
226
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
227
|
+
name="removeClassNames">removeClassNames</label>
|
|
228
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="omitNamespace"
|
|
131
229
|
data-info="Removes xmlns attribute - only recommended when embedding svg in DOM">omitNamespace</label>
|
|
132
230
|
|
|
231
|
+
|
|
232
|
+
<!--
|
|
233
|
+
|
|
234
|
+
<label><input type="checkbox" class="dsp-debug" name="convertTransforms">convertTransforms</label>
|
|
235
|
+
-->
|
|
236
|
+
|
|
133
237
|
</p>
|
|
134
238
|
</details>
|
|
135
239
|
|
|
@@ -143,8 +247,9 @@
|
|
|
143
247
|
<label>ScaleTo <input type="number" value="0" name="scaleTo"></label>
|
|
144
248
|
</p>
|
|
145
249
|
<p>
|
|
146
|
-
<label><input type="checkbox"
|
|
147
|
-
|
|
250
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="crop"
|
|
251
|
+
data-info="crops svgs to tight bbox">crop</label>
|
|
252
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="alignToOrigin"
|
|
148
253
|
data-info="aligns path to x/y 0 origin">alignToOrigin</label>
|
|
149
254
|
|
|
150
255
|
</p>
|
|
@@ -159,22 +264,30 @@
|
|
|
159
264
|
<details open>
|
|
160
265
|
<summary class="h3">Simplification</summary>
|
|
161
266
|
<p>
|
|
162
|
-
<label><input type="checkbox" name="simplifyBezier"
|
|
163
|
-
|
|
267
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="simplifyBezier"
|
|
268
|
+
checked>simplifyBezier</label>
|
|
269
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeZeroLength"
|
|
270
|
+
checked>removeZeroLength</label>
|
|
164
271
|
|
|
165
|
-
<label><input type="checkbox" name="refineClosing"
|
|
272
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="refineClosing"
|
|
273
|
+
checked>refineClosing</label>
|
|
166
274
|
|
|
167
275
|
|
|
168
|
-
<label><input type="checkbox" name="removeColinear" checked>remove
|
|
276
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeColinear" checked>remove
|
|
277
|
+
colinear linetos</label>
|
|
169
278
|
|
|
170
|
-
<label><input type="checkbox" name="flatBezierToLinetos"
|
|
279
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="flatBezierToLinetos"
|
|
280
|
+
checked>flat beziers to linetos</label>
|
|
171
281
|
|
|
172
282
|
|
|
173
|
-
<label><input type="checkbox" name="optimizeOrder" checked>optimize
|
|
174
|
-
|
|
175
|
-
<label><input type="checkbox" name="
|
|
283
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="optimizeOrder" checked>optimize
|
|
284
|
+
path order</label>
|
|
285
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="keepExtremes"
|
|
286
|
+
checked>keepExtremes</label>
|
|
287
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="keepCorners"
|
|
288
|
+
checked>keepCorners</label>
|
|
176
289
|
|
|
177
|
-
<label><input type="checkbox" name="keepInflections"
|
|
290
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="keepInflections"
|
|
178
291
|
data-info="retain inflections e.g spine of an S shape">keepInflections</label>
|
|
179
292
|
|
|
180
293
|
<!--
|
|
@@ -182,9 +295,9 @@
|
|
|
182
295
|
data-info="extrapolates dominant bezier segment – rather sloppy">extrapolateDominant</label>
|
|
183
296
|
-->
|
|
184
297
|
|
|
185
|
-
<label><input type="checkbox" name="revertToQuadratics"
|
|
186
|
-
data-info="Reverts cubic to quadratic Béziers if applicable"
|
|
187
|
-
|
|
298
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="revertToQuadratics"
|
|
299
|
+
data-info="Reverts cubic to quadratic Béziers if applicable"
|
|
300
|
+
checked>revertToQuadratics</label>
|
|
188
301
|
|
|
189
302
|
<!--
|
|
190
303
|
<label><input type="checkbox" name="reverse">try with reversed drawing direction</label>
|
|
@@ -212,26 +325,31 @@
|
|
|
212
325
|
<summary class="h3">Advanced simplifications</summary>
|
|
213
326
|
<p>
|
|
214
327
|
|
|
215
|
-
<label><input type="checkbox" name="cubicToArc"
|
|
328
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="cubicToArc"
|
|
216
329
|
data-info="Reverts cubic to arcs if applicable">cubicToArc</label>
|
|
217
330
|
|
|
218
|
-
<label><input type="checkbox" name="removeOrphanSubpaths"
|
|
331
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeOrphanSubpaths"
|
|
219
332
|
data-info="remove orphaned M commands not connecting to lines or curve segments"
|
|
220
333
|
checked>removeOrphanSubpaths</label>
|
|
221
|
-
<label><input type="checkbox"
|
|
222
|
-
|
|
223
|
-
<label><input type="checkbox"
|
|
224
|
-
|
|
334
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
335
|
+
name="refineExtremes">refineExtremes</label>
|
|
336
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
337
|
+
name="simplifyCorners">simplifyCorners</label>
|
|
338
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
339
|
+
name="simplifyRound">simplifyRound</label>
|
|
340
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="addExtremes">addExtremes</label>
|
|
225
341
|
|
|
226
342
|
<!--
|
|
227
343
|
<label><input type="checkbox" name="redraw"
|
|
228
344
|
data-info="try to redraw messed up paths based on extremes, semiextermes and corners">redraw</label>
|
|
229
345
|
|
|
230
|
-
-->
|
|
231
346
|
|
|
347
|
+
<label class="dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
348
|
+
name="addSemiExtremes">addSemiExtremes</label>
|
|
349
|
+
<label class="dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
350
|
+
name="harmonizeCpts">harmonizeCpts</label>
|
|
351
|
+
-->
|
|
232
352
|
|
|
233
|
-
<label class="dsp-debug"><input type="checkbox" name="addSemiExtremes">addSemiExtremes</label>
|
|
234
|
-
<label class="dsp-debug"><input type="checkbox" name="harmonizeCpts">harmonizeCpts</label>
|
|
235
353
|
|
|
236
354
|
</p>
|
|
237
355
|
</details>
|
|
@@ -240,10 +358,10 @@
|
|
|
240
358
|
<details>
|
|
241
359
|
<summary class="h3">Path directions</summary>
|
|
242
360
|
<p>
|
|
243
|
-
<label><input type="checkbox" name="reversePath"
|
|
361
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="reversePath"
|
|
244
362
|
data-info="Reverses path drawing direction">reversePath</label>
|
|
245
363
|
|
|
246
|
-
<label><input type="checkbox" name="fixDirections"
|
|
364
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="fixDirections"
|
|
247
365
|
data-info="Fixes sub path drawing directions to make fill rules obsolete">fixDirections</label>
|
|
248
366
|
</p>
|
|
249
367
|
</details>
|
|
@@ -251,9 +369,11 @@
|
|
|
251
369
|
<details open>
|
|
252
370
|
<summary class="h3">SVG output settings</summary>
|
|
253
371
|
<p>
|
|
254
|
-
<label><input type="checkbox" name="toRelative"
|
|
255
|
-
|
|
256
|
-
<label><input type="checkbox" name="
|
|
372
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="toRelative"
|
|
373
|
+
checked>toRelative</label>
|
|
374
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="toShorthands"
|
|
375
|
+
checked>toShorthands</label>
|
|
376
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="lineToCubic"
|
|
257
377
|
data-info="converts lines to cubics – helpful for morphing animations">lineToCubic</label>
|
|
258
378
|
|
|
259
379
|
</p>
|
|
@@ -264,7 +384,7 @@
|
|
|
264
384
|
<label><input type="radio" name="minifyD" value="2">beautify</label>
|
|
265
385
|
</p>
|
|
266
386
|
<p>
|
|
267
|
-
<label><input type="checkbox" name="autoAccuracy"
|
|
387
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="autoAccuracy"
|
|
268
388
|
data-info="takes an estimated suitable floating point accuracy based on smallest segment"
|
|
269
389
|
checked>autoAccuracy</label>
|
|
270
390
|
</p>
|
|
@@ -285,10 +405,11 @@
|
|
|
285
405
|
<details>
|
|
286
406
|
<summary class="h3">Polygon</summary>
|
|
287
407
|
<p>
|
|
288
|
-
<label class="--dsp-debug"><input type="checkbox" name="smoothPoly"
|
|
408
|
+
<label class="--dsp-debug"><input type="checkbox" data-type="checkbox-switch" name="smoothPoly"
|
|
289
409
|
data-info="Converts a polygon to smooth cubic beziers using the Philip J. Schneider curve fitting algorithm">smoothPoly</label>
|
|
290
410
|
|
|
291
|
-
<label class="--dsp-debug"><input type="checkbox"
|
|
411
|
+
<label class="--dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
412
|
+
name="toPolygon">toPolygon</label>
|
|
292
413
|
</p>
|
|
293
414
|
|
|
294
415
|
|
|
@@ -331,7 +452,7 @@
|
|
|
331
452
|
<textarea class="code" name="config" id="textConfig" data-tools="copy" data-ignore="true"
|
|
332
453
|
readonly></textarea>
|
|
333
454
|
</label>
|
|
334
|
-
<label><input type="checkbox" name="omitDefaults"
|
|
455
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="omitDefaults"
|
|
335
456
|
data-info="only include settings that are not defaults" checked>omitDefaults</label>
|
|
336
457
|
|
|
337
458
|
</p>
|
|
@@ -346,8 +467,19 @@
|
|
|
346
467
|
|
|
347
468
|
|
|
348
469
|
<header class="pst-sticky --pdd-1em z-ind-1000 pdd-1em">
|
|
349
|
-
|
|
350
|
-
|
|
470
|
+
|
|
471
|
+
<div class="header-nav">
|
|
472
|
+
<label class="navToggle"><input type="checkbox" name="showNav" class="showNav" id="showNav"
|
|
473
|
+
data-icon="adjustments-vertical" checked title="show settings" data-sync="showNav0"></label>
|
|
474
|
+
|
|
475
|
+
<a href="#" class="a-dialog" data-dialog="#about" data-dialog-title="Options" data-icon="question"
|
|
476
|
+
title="Available parameters"></a>
|
|
477
|
+
|
|
478
|
+
<button type="button" class="elzoomo-btn elzoomo-btn-zoomin" title="zoom in"
|
|
479
|
+
data-icon="plus"></button>
|
|
480
|
+
<button type="button" class="elzoomo-btn elzoomo-btn-zoomout" title="zoom out"
|
|
481
|
+
data-icon="minus"></button>
|
|
482
|
+
</div>
|
|
351
483
|
|
|
352
484
|
<a class="lnk-github" href="https://github.com/herrstrietzel/svg-path-simplify"
|
|
353
485
|
title="See github repository">
|
|
@@ -355,58 +487,80 @@
|
|
|
355
487
|
<use href="#github"></use>
|
|
356
488
|
</svg>
|
|
357
489
|
</a>
|
|
490
|
+
|
|
491
|
+
|
|
358
492
|
</header>
|
|
359
493
|
|
|
360
494
|
<footer class="footer pst-abs btt-0 lft-0 rgh-0 z-ind-1000">
|
|
361
495
|
<div class="footer-wrp --dsp-flx --alg-itm-cnt pdd-1em">
|
|
362
496
|
<p class="pReport txt-rgh" id="pReport"></p>
|
|
363
497
|
|
|
364
|
-
<div class="wrp-btns txt-rgh">
|
|
498
|
+
<div class="grd-btns grd grd-1 grd-ld-2 wrp-btns --txt-rgh">
|
|
365
499
|
|
|
366
|
-
<
|
|
500
|
+
<div class="col col-switch">
|
|
501
|
+
<p class="mrg-0">
|
|
502
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="showMarkers"
|
|
503
|
+
checked>showMarkers</label>
|
|
367
504
|
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
505
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
506
|
+
name="showTransparency">showTransparency</label>
|
|
507
|
+
</p>
|
|
508
|
+
</div>
|
|
371
509
|
|
|
372
|
-
|
|
373
|
-
<form action="https://codepen.io/pen/define" method="POST" target="_blank"
|
|
374
|
-
class="form-codepen dsp-inl-blc">
|
|
375
|
-
<input id="inputCodepen" type="hidden" value="" name="data" data-ignore="true">
|
|
376
|
-
<button title="Edit in codepen"
|
|
377
|
-
class="drp-shd btn btnCodepen btn-default btn-download btn-neg" type="submit">
|
|
378
|
-
<span class="icn-wrp icn-wrp-codepen icn-wrp-left">
|
|
379
|
-
<svg xmlns="http://www.w3.org/2000/svg" class="icn-svg" viewBox="0 0 24 24"
|
|
380
|
-
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
381
|
-
stroke-linejoin="round">
|
|
382
|
-
<path
|
|
383
|
-
d="M12 2l10 6.5v7l-10 6.5-10-6.5v-7zm0 20v-6.5m10-7l-10 7-10-7m0 7l10-7 10 7m-10-13.5v6.5" />
|
|
384
|
-
</svg>
|
|
385
|
-
</span> Codepen
|
|
386
|
-
</button>
|
|
387
|
-
</form>
|
|
510
|
+
<div class="col col-btns grd grd-1">
|
|
388
511
|
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
512
|
+
<div class="col">
|
|
513
|
+
<!-- Share -->
|
|
514
|
+
<a href="#" class="drp-shd btn btn-default btn-download btn-neg" id="shareUrl"
|
|
515
|
+
data-icon="link">Share</a>
|
|
393
516
|
|
|
517
|
+
<!-- codepen -->
|
|
518
|
+
<form action="https://codepen.io/pen/define" method="POST" target="_blank"
|
|
519
|
+
class="form-codepen dsp-inl-blc">
|
|
520
|
+
<input id="inputCodepen" type="hidden" value="" name="data" data-ignore="true">
|
|
521
|
+
<button title="Edit in codepen"
|
|
522
|
+
class="drp-shd btn btnCodepen btn-default btn-download btn-neg" type="submit">
|
|
523
|
+
<span class="icn-wrp icn-wrp-codepen icn-wrp-left">
|
|
524
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icn-svg" viewBox="0 0 24 24"
|
|
525
|
+
fill="none" stroke="currentColor" stroke-width="2"
|
|
526
|
+
stroke-linecap="round" stroke-linejoin="round">
|
|
527
|
+
<path
|
|
528
|
+
d="M12 2l10 6.5v7l-10 6.5-10-6.5v-7zm0 20v-6.5m10-7l-10 7-10-7m0 7l10-7 10 7m-10-13.5v6.5" />
|
|
529
|
+
</svg>
|
|
530
|
+
</span> Codepen
|
|
531
|
+
</button>
|
|
532
|
+
</form>
|
|
394
533
|
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
534
|
+
<!-- svg editor -->
|
|
535
|
+
<a class="drp-shd btn lnk-edit btn-default btn-download btn-neg" id="linkEdit"
|
|
536
|
+
title="Edit in svg-path-editor" target="_blank" rel="noopener noreferrer"
|
|
537
|
+
data-icon="pencil" href="">Edit</a>
|
|
398
538
|
|
|
399
|
-
<!-- save -->
|
|
400
|
-
<a href="#" data-name=""
|
|
401
|
-
class="drp-shd btn btn-default btn-download btn-neg btn-download-single" id="btnDownload"
|
|
402
|
-
data-icon="arrow-down-tray" download="simplified.svg"> Download SVG</a>
|
|
403
539
|
|
|
540
|
+
</div>
|
|
404
541
|
|
|
405
|
-
|
|
406
|
-
<a href="#" data-name=""
|
|
407
|
-
class="drp-shd btn btn-default btn-download btn-download-multi btn-neg processing"
|
|
408
|
-
id="btnDownloadZip" data-icon="arrow-down-tray" download="simplified.zip"> Download Zip</a>
|
|
542
|
+
<div class="col">
|
|
409
543
|
|
|
544
|
+
<!-- copy -->
|
|
545
|
+
<button id="btnCopy" class="drp-shd btn btn-default btn-download btn-neg btn-copy"
|
|
546
|
+
data-icon="copy">Copy</button>
|
|
547
|
+
|
|
548
|
+
|
|
549
|
+
<!-- save -->
|
|
550
|
+
<a href="#" data-name=""
|
|
551
|
+
class="drp-shd btn btn-default btn-download btn-neg btn-download-single"
|
|
552
|
+
id="btnDownload" data-icon="arrow-down-tray" download="simplified.svg"> Download
|
|
553
|
+
SVG</a>
|
|
554
|
+
|
|
555
|
+
|
|
556
|
+
<!-- save multi -->
|
|
557
|
+
<a href="#" data-name=""
|
|
558
|
+
class="drp-shd btn btn-default btn-download btn-download-multi btn-neg processing"
|
|
559
|
+
id="btnDownloadZip" data-icon="arrow-down-tray" download="simplified.zip"> Download
|
|
560
|
+
Zip</a>
|
|
561
|
+
|
|
562
|
+
</div>
|
|
563
|
+
</div>
|
|
410
564
|
|
|
411
565
|
|
|
412
566
|
</div>
|
|
@@ -421,9 +575,16 @@
|
|
|
421
575
|
<p class="fnt-siz-2em"><span data-icon="spinner"></span> Processing</p>
|
|
422
576
|
</div>
|
|
423
577
|
|
|
578
|
+
<!--
|
|
579
|
+
<div class="elzoomo-toolbar">
|
|
580
|
+
<button type="button" class="elzoomo-btn elzoomo-btn-zoomin" title="zoom in">+</button>
|
|
581
|
+
<button type="button" class="elzoomo-btn elzoomo-btn-zoomout" title="zoom out">−</button>
|
|
582
|
+
</div>
|
|
583
|
+
|
|
584
|
+
-->
|
|
424
585
|
|
|
425
586
|
<div class="wrp-zoom"
|
|
426
|
-
data-zoom='{"minScale":0.1,"maxScale":100,"zoom":1,"zoomStep":1.001, "toolbar":
|
|
587
|
+
data-zoom='{"minScale":0.1,"maxScale":100,"zoom":1,"zoomStep":1.001, "toolbar":false}'>
|
|
427
588
|
|
|
428
589
|
<svg id="svg" class="svgO" viewBox="0 0 100 100">
|
|
429
590
|
|
|
@@ -466,7 +627,138 @@
|
|
|
466
627
|
|
|
467
628
|
|
|
468
629
|
|
|
469
|
-
|
|
630
|
+
<dialog class="--dialog sr-only" id="about">
|
|
631
|
+
|
|
632
|
+
<h3 class="" dir="auto">Simplification parameters</h3>
|
|
633
|
+
<p>These params control shich simplifications are applied. The default settings aim at a safe or balanced
|
|
634
|
+
performance-to-minification ratio. However if your main goal is to get the most compact result you can
|
|
635
|
+
enable additional options which also require more processing time.</p>
|
|
636
|
+
|
|
637
|
+
<table>
|
|
638
|
+
<thead>
|
|
639
|
+
<tr>
|
|
640
|
+
<th>parameter</th>
|
|
641
|
+
<th>effect</th>
|
|
642
|
+
<th>type</th>
|
|
643
|
+
<th>default</th>
|
|
644
|
+
</tr>
|
|
645
|
+
</thead>
|
|
646
|
+
<tbody>
|
|
647
|
+
<tr>
|
|
648
|
+
<td>simplifyBezier</td>
|
|
649
|
+
<td>main Bézier simplification. When disabled you get the common optimization similar to SVGO
|
|
650
|
+
(rounding, to all relative and shorthand conversions)</td>
|
|
651
|
+
<td>Boolean</td>
|
|
652
|
+
<td>true</td>
|
|
653
|
+
</tr>
|
|
654
|
+
<tr>
|
|
655
|
+
<td>tolerance</td>
|
|
656
|
+
<td>increase or decrease tolerance: higher values allow more distortions, lower ones more shape
|
|
657
|
+
fidelity</td>
|
|
658
|
+
<td>Number</td>
|
|
659
|
+
<td>1</td>
|
|
660
|
+
</tr>
|
|
661
|
+
<tr>
|
|
662
|
+
<td>optimizeOrder</td>
|
|
663
|
+
<td>reorders commands to get more adjacent simplification candidates. Improves optimization
|
|
664
|
+
efficiency</td>
|
|
665
|
+
<td>Boolean</td>
|
|
666
|
+
<td>true</td>
|
|
667
|
+
</tr>
|
|
668
|
+
<tr>
|
|
669
|
+
<td>removeColinear</td>
|
|
670
|
+
<td>removes unnecessary zero-length or colinear lineto commands</td>
|
|
671
|
+
<td>Boolean</td>
|
|
672
|
+
<td>true</td>
|
|
673
|
+
</tr>
|
|
674
|
+
<tr>
|
|
675
|
+
<td>flatBezierToLinetos</td>
|
|
676
|
+
<td>replaces flat Béziers with linetos which also can be stripped via previous colinear removal</td>
|
|
677
|
+
<td>Boolean</td>
|
|
678
|
+
<td>true</td>
|
|
679
|
+
</tr>
|
|
680
|
+
<tr>
|
|
681
|
+
<td>revertToQuadratics</td>
|
|
682
|
+
<td>replaces cubic Béziers with quadratic (more compact) ones when applicable</td>
|
|
683
|
+
<td>Boolean</td>
|
|
684
|
+
<td>true</td>
|
|
685
|
+
</tr>
|
|
686
|
+
<tr>
|
|
687
|
+
<td>keepExtremes</td>
|
|
688
|
+
<td>skips simplification accross x/y extrema – improves shape fidelity</td>
|
|
689
|
+
<td>Boolean</td>
|
|
690
|
+
<td>true</td>
|
|
691
|
+
</tr>
|
|
692
|
+
<tr>
|
|
693
|
+
<td>keepCorners</td>
|
|
694
|
+
<td>skips simplification corners – improves shape fidelity</td>
|
|
695
|
+
<td>Boolean</td>
|
|
696
|
+
<td>true</td>
|
|
697
|
+
</tr>
|
|
698
|
+
<tr>
|
|
699
|
+
<td>keepInflections</td>
|
|
700
|
+
<td>retains commands introducing direction changes – adds complexity but may help for editing in a
|
|
701
|
+
graphic application</td>
|
|
702
|
+
<td>Boolean</td>
|
|
703
|
+
<td>false</td>
|
|
704
|
+
</tr>
|
|
705
|
+
</tbody>
|
|
706
|
+
</table>
|
|
707
|
+
|
|
708
|
+
<h3>Advanced simplifications</h3>
|
|
709
|
+
<table>
|
|
710
|
+
<thead>
|
|
711
|
+
<tr>
|
|
712
|
+
<th>parameter</th>
|
|
713
|
+
<th>effect</th>
|
|
714
|
+
<th>type</th>
|
|
715
|
+
<th>default</th>
|
|
716
|
+
</tr>
|
|
717
|
+
</thead>
|
|
718
|
+
<tbody>
|
|
719
|
+
<tr>
|
|
720
|
+
<td>refineExtremes</td>
|
|
721
|
+
<td>tries to combine commands close to an adjacent x/y extreme segment</td>
|
|
722
|
+
<td>Boolean</td>
|
|
723
|
+
<td>false</td>
|
|
724
|
+
</tr>
|
|
725
|
+
<tr>
|
|
726
|
+
<td>addExtremes</td>
|
|
727
|
+
<td>adds commands at x/y extrema – adds complexity but may help for editing in a graphic application
|
|
728
|
+
– when using this option enable <code>refineExtremes</code> as well to avoid tiny adjacent
|
|
729
|
+
segments</td>
|
|
730
|
+
<td>Boolean</td>
|
|
731
|
+
<td>false</td>
|
|
732
|
+
</tr>
|
|
733
|
+
<tr>
|
|
734
|
+
<td>simplifyCorners</td>
|
|
735
|
+
<td>replaces Bézier segments enclosed by linetos with single quadratic commands – handy to reduce
|
|
736
|
+
overly complex tiny corner roundings. See example in <a
|
|
737
|
+
href="https://herrstrietzel.github.io/svg-path-simplify?samples=fontawesome_gears&refineExtremes=true&simplifyCorners=true"
|
|
738
|
+
rel="nofollow">webapp</a></td>
|
|
739
|
+
<td>Boolean</td>
|
|
740
|
+
<td>false</td>
|
|
741
|
+
</tr>
|
|
742
|
+
<tr>
|
|
743
|
+
<td>cubicToArc</td>
|
|
744
|
+
<td>replaces Bézier segments by elliptic arc <code>A</code> commands where applicable – can reduce
|
|
745
|
+
complexity for semi- or full circles</td>
|
|
746
|
+
<td>Boolean</td>
|
|
747
|
+
<td>false</td>
|
|
748
|
+
</tr>
|
|
749
|
+
<tr>
|
|
750
|
+
<td>simplifyRound</td>
|
|
751
|
+
<td>replaces small round segments encloses by linetos – helps to simplify shapes like gears/cogs
|
|
752
|
+
</td>
|
|
753
|
+
<td>Boolean</td>
|
|
754
|
+
<td>false</td>
|
|
755
|
+
</tr>
|
|
756
|
+
</tbody>
|
|
757
|
+
</table>
|
|
758
|
+
|
|
759
|
+
|
|
760
|
+
|
|
761
|
+
</dialog>
|
|
470
762
|
|
|
471
763
|
<!--
|
|
472
764
|
<div id="spriteMap"></div>
|