svg-path-simplify 0.3.4 → 0.3.6
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 +4104 -3481
- package/dist/svg-path-simplify.esm.min.js +2 -8
- package/dist/svg-path-simplify.js +4105 -3480
- package/dist/svg-path-simplify.min.js +2 -8
- package/dist/svg-path-simplify.pathdata.esm.js +1090 -1039
- package/dist/svg-path-simplify.pathdata.esm.min.js +2 -8
- package/index.html +493 -116
- package/package.json +1 -1
- package/site.webmanifest +21 -0
- package/src/constants.js +3 -1
- package/src/index.js +7 -1
- package/src/pathData_simplify_cubic.js +1 -10
- package/src/pathSimplify-main.js +71 -28
- package/src/pathSimplify-only-pathdata.js +2 -2
- package/src/svg-getAttributes.js +13 -0
- package/src/svg_flatten_transforms.js +43 -0
- package/src/svg_getViewbox.js +23 -11
- package/src/svg_rootSVG.js +9 -0
- package/src/svgii/convert_colors.js +98 -0
- package/src/svgii/convert_units.js +144 -0
- package/src/svgii/geometry.js +24 -4
- package/src/svgii/geometry_bbox.js +2 -1
- package/src/svgii/geometry_bbox_element.js +46 -0
- package/src/svgii/pathData_analyze.js +1 -1
- package/src/svgii/pathData_convert.js +143 -29
- package/src/svgii/pathData_parse.js +2 -99
- package/src/svgii/pathData_parse_els.js +198 -125
- package/src/svgii/pathData_simplify_refineCorners.js +72 -43
- package/src/svgii/pathData_stringify.js +6 -5
- package/src/svgii/poly_normalize.js +21 -1
- package/src/svgii/rounding.js +36 -5
- package/src/svgii/svg-styles-getTransforms.js +43 -5
- package/src/svgii/svg-styles-to-attributes-const.js +8 -3
- package/src/svgii/svg-styles-to-attributes.js +106 -9
- package/src/svgii/svg_cleanup.js +291 -35
- package/src/svgii/svg_el_parse_style_props.js +423 -0
- package/src/svgii/stringify.js +0 -103
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,36 +67,28 @@
|
|
|
28
67
|
<script src="demo/samples.js" defer></script>
|
|
29
68
|
|
|
30
69
|
|
|
31
|
-
|
|
32
70
|
<!-- UI helpers -->
|
|
71
|
+
<link rel="preload" href="https://cdn.jsdelivr.net/npm/enhance-inputs@0.3.6/dist/enhanceInputs.min.css" as="style" />
|
|
33
72
|
|
|
34
|
-
|
|
35
|
-
<
|
|
36
|
-
<script src="https://cdn.jsdelivr.net/npm/enhance-inputs@latest/dist/enhanceInputs.min.js" defer></script>
|
|
37
|
-
|
|
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>
|
|
38
75
|
<!--
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
-->
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<script src="https://cdn.jsdelivr.net/npm/uzip@0.20201231.0/UZIP.min.js" defer></script>
|
|
46
|
-
|
|
76
|
+
<link rel="stylesheet" href="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.css">
|
|
77
|
+
<script src="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.js" defer></script>
|
|
78
|
+
-->
|
|
47
79
|
|
|
48
|
-
<script src="demo/lib/elzoomo/elzoomo.js" defer></script>
|
|
49
80
|
|
|
50
81
|
<!--
|
|
51
82
|
<script src="https://cdn.jsdelivr.net/npm/svg-path-simplify@0.1.2/dist/svg-path-simplify.min.js" defer></script>
|
|
52
83
|
-->
|
|
53
84
|
|
|
54
|
-
|
|
55
|
-
|
|
56
85
|
<script src="dist/svg-path-simplify.js" defer></script>
|
|
57
|
-
<
|
|
86
|
+
<link rel="stylesheet" href="demo/css/app.css">
|
|
58
87
|
|
|
88
|
+
<script src="demo/lib/elzoomo/elzoomo.min.js" defer></script>
|
|
89
|
+
<script src="demo/app.js" type="module"></script>
|
|
90
|
+
<script src="https://cdn.jsdelivr.net/npm/uzip@0.20201231.0/UZIP.min.js" defer></script>
|
|
59
91
|
|
|
60
|
-
<link rel="stylesheet" href="demo/css/app.css">
|
|
61
92
|
|
|
62
93
|
</head>
|
|
63
94
|
|
|
@@ -69,24 +100,80 @@
|
|
|
69
100
|
<div class="grd-main hgh-100vh grd grd-md-3 grd-ld-5 gap-0">
|
|
70
101
|
<div class="sidebar-wrap scrollbar scroll-content scroll-track">
|
|
71
102
|
|
|
103
|
+
<header class="header-left dsp-inl-blc">
|
|
104
|
+
<label class="navToggle"><input type="checkbox" name="showNav0" class="showNav0 showNav" id="showNav0"
|
|
105
|
+
data-icon="adjustments-vertical" checked title="show settings" data-sync="showNav"></label>
|
|
106
|
+
</header>
|
|
107
|
+
|
|
108
|
+
|
|
72
109
|
<!--toolbars-->
|
|
73
110
|
<aside class="aside aside-1 hgh-100 aside scrollbar scroll-content-ld scroll-track pdd-1em pos-rlt">
|
|
74
|
-
|
|
75
|
-
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
<p class="txt-cnt mrg-0">
|
|
114
|
+
<img class="icn-logo " width="100" height="100"
|
|
115
|
+
src="https://herrstrietzel.github.io/svg-path-simplify/favicon.svg" alt="svg-path-simplify">
|
|
76
116
|
</p>
|
|
77
117
|
|
|
78
|
-
<h1 class="txt-cnt">Simplify
|
|
79
|
-
<p>
|
|
118
|
+
<h1 class="txt-cnt h1">Simplify SVG files and path data</h1>
|
|
119
|
+
<h2 class="p txt-cnt">Optimizes SVG data by removing excessive commands and applying markup
|
|
120
|
+
minifications such as coordinate rounding, relative and applicable shorthand commands</h2>
|
|
121
|
+
|
|
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
|
+
|
|
80
127
|
|
|
81
128
|
<p class="--btn-neg" data-ui="reset"></p>
|
|
82
129
|
|
|
130
|
+
<details>
|
|
131
|
+
<summary class="h3">Privacy</summary>
|
|
132
|
+
|
|
133
|
+
<h3>Simplification</h3>
|
|
134
|
+
<p>Enter your SVG pathData or complete file markup or upload SVG files.</p>
|
|
135
|
+
<p class="fnt-wgh-700">All data is processed 100% client-side – no data is transferred or analyzed
|
|
136
|
+
by any third-party service during simplification.</p>
|
|
137
|
+
|
|
138
|
+
<h3>Sharing and editing</h3>
|
|
139
|
+
<ul>
|
|
140
|
+
<li>Codepen – sends your current data to <a href="https://codepen.io">codepen.io</a> and creates
|
|
141
|
+
a new pen
|
|
142
|
+
for testing purposes</li>
|
|
143
|
+
<li>Edit – sends data to <a href="https://yqnn.github.io/svg-path-editor">svg-path-editor</a>
|
|
144
|
+
for further
|
|
145
|
+
path node editing</li>
|
|
146
|
+
</ul>
|
|
147
|
+
|
|
148
|
+
<h3>External scripts</h3>
|
|
149
|
+
<p>The webapp loads these external scripts from jsdelivr</p>
|
|
150
|
+
<ul>
|
|
151
|
+
<li><a href="https://github.com/WebReflection/linkedom">linkedom</a>
|
|
152
|
+
– used for web worker based multi file
|
|
153
|
+
processing</li>
|
|
154
|
+
<li><a href="https://github.com/photopea/UZIP.js">UZIP</a>
|
|
155
|
+
– for multifile zip exports</li>
|
|
156
|
+
<li><a href="https://github.com/herrstrietzel/enhance-inputs">enhance-inputs</a>
|
|
157
|
+
– used for GUI input
|
|
158
|
+
styling and updating logic</li>
|
|
159
|
+
</ul>
|
|
160
|
+
|
|
161
|
+
<h3>Local Storage</h3>
|
|
162
|
+
<p>Your current settings as well as your input SVG data is stored in local Storage. This provides to
|
|
163
|
+
apply the same settings to multiple files after reloads. You can delete this settings cache via
|
|
164
|
+
the reset settings button.</p>
|
|
165
|
+
<p>You image data is never transferred to the github server.</p>
|
|
166
|
+
|
|
167
|
+
</details>
|
|
168
|
+
|
|
169
|
+
|
|
83
170
|
<p><input type="file" class="dsp-non --btn-neg" id="inputFile" name="svgFile" value="upload"
|
|
84
171
|
data-label="Upload SVG file/s" accept=".svg" data-ignore="true" multiple></p>
|
|
85
172
|
|
|
86
173
|
|
|
87
174
|
<p>
|
|
88
175
|
<label for="inputSamples" class="sr-only"> Select samples</label>
|
|
89
|
-
|
|
176
|
+
<select name="samples" id="inputSamples" data-options="samples"></select>
|
|
90
177
|
</p>
|
|
91
178
|
|
|
92
179
|
|
|
@@ -98,41 +185,134 @@
|
|
|
98
185
|
<details open>
|
|
99
186
|
<summary class="h3">SVG input normalization</summary>
|
|
100
187
|
<p>
|
|
101
|
-
<label><input type="checkbox" name="arcToCubic">arcToCubic</label>
|
|
102
|
-
<label><input type="checkbox" name="quadraticToCubic"
|
|
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>
|
|
103
191
|
|
|
104
192
|
<!--
|
|
105
193
|
|
|
106
194
|
<label><input type="checkbox" name="removePrologue" checked>removePrologue</label>
|
|
107
195
|
-->
|
|
108
196
|
|
|
109
|
-
<label><input type="checkbox" name="removeNameSpaced"
|
|
110
|
-
|
|
111
|
-
|
|
197
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeNameSpaced"
|
|
198
|
+
checked>removeNameSpaced</label>
|
|
199
|
+
|
|
200
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeHidden" data-info="Graphic applications usually don't exclude hidden layers – enable it to remove them to remove undesired bloat"
|
|
201
|
+
checked>removeHidden</label>
|
|
202
|
+
|
|
203
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="cleanupDefs"
|
|
204
|
+
data-info="Removes empty defs and moves all defs to the top of the SVG markup – many environments struggle with footer placements (figma problem)"
|
|
205
|
+
checked>cleanupDefs</label>
|
|
206
|
+
|
|
207
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="cleanupClip" checked
|
|
208
|
+
data-info="Removes unnecessary clip-paths – spanning the entire viewBox (e.g typical for figma)">cleanupClip</label>
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="cleanupSVGAtts"
|
|
212
|
+
data-info="remove SVG non-essential attributes" checked>cleanupSVGAtts</label>
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="cleanUpStrokes" checked
|
|
216
|
+
data-info="removes stroke attributes when stroke color is missing">cleanUpStrokes</label>
|
|
217
|
+
|
|
112
218
|
|
|
113
|
-
<label><input type="checkbox" name="fixHref"
|
|
114
|
-
data-info="replaces
|
|
219
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="fixHref"
|
|
220
|
+
data-info="replaces xlink:href with href – many applications still rely on xlink:href notation!"
|
|
221
|
+
>fixHref</label>
|
|
115
222
|
|
|
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>
|
|
116
225
|
|
|
117
|
-
<label><input type="checkbox" name="removeHidden" checked>removeHidden</label>
|
|
118
226
|
|
|
227
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeOffCanvas"
|
|
228
|
+
data-info="Removes elements beyond viewBox/outside viewport">removeOffCanvas</label>
|
|
119
229
|
|
|
120
|
-
<label><input type="checkbox" name="
|
|
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
|
+
|
|
233
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="addDimensions"
|
|
234
|
+
data-info="Many graphic applications won't translate viewBox correctly to artboard/document size">addDimensions</label>
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="stylesToAttributes"
|
|
121
238
|
data-info="replaces inline styles with SVG atributes and removes obsolete attributes and styles">stylesToAttributes</label>
|
|
122
239
|
|
|
123
|
-
<label><input type="checkbox" name="mergePaths">mergePaths</label>
|
|
124
|
-
<label><input type="checkbox" name="shapesToPaths"
|
|
125
|
-
data-info="convert shapes like circles, rects to path elements">shapesToPaths</label>
|
|
126
240
|
|
|
127
|
-
<label><input type="checkbox" name="
|
|
128
|
-
|
|
129
|
-
<label><input type="checkbox"
|
|
130
|
-
|
|
241
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="mergePaths">mergePaths</label>
|
|
242
|
+
|
|
243
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
244
|
+
name="removeDimensions">removeDimensions</label>
|
|
245
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeIds">removeIds</label>
|
|
246
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
247
|
+
name="removeClassNames">removeClassNames</label>
|
|
248
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="omitNamespace"
|
|
131
249
|
data-info="Removes xmlns attribute - only recommended when embedding svg in DOM">omitNamespace</label>
|
|
132
250
|
|
|
251
|
+
<!--
|
|
252
|
+
|
|
253
|
+
<label><input type="checkbox" class="dsp-debug" name="convertTransforms">convertTransforms</label>
|
|
254
|
+
-->
|
|
255
|
+
|
|
133
256
|
</p>
|
|
134
257
|
</details>
|
|
135
258
|
|
|
259
|
+
<details open>
|
|
260
|
+
<summary class="h3">
|
|
261
|
+
SVG shape <−> path conversion
|
|
262
|
+
</summary>
|
|
263
|
+
|
|
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
|
+
|
|
272
|
+
<p>
|
|
273
|
+
<label>
|
|
274
|
+
<input type="radio" name="shapeConvert" value="0" checked>keep
|
|
275
|
+
</label>
|
|
276
|
+
<label>
|
|
277
|
+
<input type="radio" name="shapeConvert" value="toPaths">shapesToPaths
|
|
278
|
+
</label>
|
|
279
|
+
<label>
|
|
280
|
+
<input type="radio" name="shapeConvert" value="toShapes">pathsToShapes
|
|
281
|
+
</label>
|
|
282
|
+
</p>
|
|
283
|
+
|
|
284
|
+
<p>
|
|
285
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="convert_rects"
|
|
286
|
+
data-info="convert paths to rects if applicable">rects</label>
|
|
287
|
+
|
|
288
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="convert_ellipses"
|
|
289
|
+
data-info="convert paths to circles or ellipses if applicable – ellipses/circles are usually more compact than paths – unless you merge paths">ellipses/circles</label>
|
|
290
|
+
|
|
291
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="convert_poly"
|
|
292
|
+
data-info="convert paths to polys if applicable – polylines are quite inefficient as they are all absolute">polygons/polylines</label>
|
|
293
|
+
|
|
294
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="convert_lines"
|
|
295
|
+
data-info="convert paths to lines if applicable">lines</label>
|
|
296
|
+
</p>
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
<details class="mrg-1em mrg-btt">
|
|
300
|
+
<summary data-summary='{"icon":"question"}' class="h4">Path vs. Shape?</summary>
|
|
301
|
+
<p>SVG shapes <em>can</em> often be more concise if they fall into the category of »primitives«
|
|
302
|
+
– so all significant geometrical parameters are described by a discrete number of
|
|
303
|
+
parameters. Elements of this class are <code><circle></code>,
|
|
304
|
+
<code><ellipse></code>, <code><ellipse></code> and <code><line></code>.
|
|
305
|
+
The <code><polygon></code> and <code><polyline></code> don't fall into this
|
|
306
|
+
category as the most significant attribute <code><points></code> (specifying the
|
|
307
|
+
vertices) allows an arbitrary array of point. These poly elements can always be expressed
|
|
308
|
+
more concisely with a <code><path></code> element as paths support advanced
|
|
309
|
+
minifications such as relative commands and shorthands for horizontal or vertical segments.
|
|
310
|
+
</p>
|
|
311
|
+
</details>
|
|
312
|
+
|
|
313
|
+
|
|
314
|
+
</details>
|
|
315
|
+
|
|
136
316
|
<details>
|
|
137
317
|
<summary class="h3">SVG/path scaling</summary>
|
|
138
318
|
<p>
|
|
@@ -143,8 +323,9 @@
|
|
|
143
323
|
<label>ScaleTo <input type="number" value="0" name="scaleTo"></label>
|
|
144
324
|
</p>
|
|
145
325
|
<p>
|
|
146
|
-
<label><input type="checkbox"
|
|
147
|
-
|
|
326
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="crop"
|
|
327
|
+
data-info="crops svgs to tight bbox">crop</label>
|
|
328
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="alignToOrigin"
|
|
148
329
|
data-info="aligns path to x/y 0 origin">alignToOrigin</label>
|
|
149
330
|
|
|
150
331
|
</p>
|
|
@@ -159,22 +340,29 @@
|
|
|
159
340
|
<details open>
|
|
160
341
|
<summary class="h3">Simplification</summary>
|
|
161
342
|
<p>
|
|
162
|
-
<label><input type="checkbox" name="simplifyBezier"
|
|
163
|
-
|
|
343
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="simplifyBezier"
|
|
344
|
+
checked>simplifyBezier</label>
|
|
345
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeZeroLength"
|
|
346
|
+
checked>removeZeroLength</label>
|
|
164
347
|
|
|
165
|
-
<label><input type="checkbox" name="refineClosing"
|
|
348
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="refineClosing"
|
|
349
|
+
checked>refineClosing</label>
|
|
166
350
|
|
|
167
351
|
|
|
168
|
-
<label><input type="checkbox" name="removeColinear"
|
|
352
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeColinear"
|
|
353
|
+
checked>removeColinear</label>
|
|
169
354
|
|
|
170
|
-
<label><input type="checkbox" name="flatBezierToLinetos"
|
|
355
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="flatBezierToLinetos"
|
|
356
|
+
checked>flatBezierToLinetos</label>
|
|
171
357
|
|
|
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>
|
|
172
364
|
|
|
173
|
-
<label><input type="checkbox" name="
|
|
174
|
-
<label><input type="checkbox" name="keepExtremes" checked>keepExtremes</label>
|
|
175
|
-
<label><input type="checkbox" name="keepCorners" checked>keepCorners</label>
|
|
176
|
-
|
|
177
|
-
<label><input type="checkbox" name="keepInflections"
|
|
365
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="keepInflections"
|
|
178
366
|
data-info="retain inflections e.g spine of an S shape">keepInflections</label>
|
|
179
367
|
|
|
180
368
|
<!--
|
|
@@ -182,9 +370,9 @@
|
|
|
182
370
|
data-info="extrapolates dominant bezier segment – rather sloppy">extrapolateDominant</label>
|
|
183
371
|
-->
|
|
184
372
|
|
|
185
|
-
<label><input type="checkbox" name="revertToQuadratics"
|
|
186
|
-
data-info="Reverts cubic to quadratic Béziers if applicable"
|
|
187
|
-
|
|
373
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="revertToQuadratics"
|
|
374
|
+
data-info="Reverts cubic to quadratic Béziers if applicable"
|
|
375
|
+
checked>revertToQuadratics</label>
|
|
188
376
|
|
|
189
377
|
<!--
|
|
190
378
|
<label><input type="checkbox" name="reverse">try with reversed drawing direction</label>
|
|
@@ -212,26 +400,31 @@
|
|
|
212
400
|
<summary class="h3">Advanced simplifications</summary>
|
|
213
401
|
<p>
|
|
214
402
|
|
|
215
|
-
<label><input type="checkbox" name="cubicToArc"
|
|
403
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="cubicToArc"
|
|
216
404
|
data-info="Reverts cubic to arcs if applicable">cubicToArc</label>
|
|
217
405
|
|
|
218
|
-
<label><input type="checkbox" name="removeOrphanSubpaths"
|
|
406
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="removeOrphanSubpaths"
|
|
219
407
|
data-info="remove orphaned M commands not connecting to lines or curve segments"
|
|
220
408
|
checked>removeOrphanSubpaths</label>
|
|
221
|
-
<label><input type="checkbox"
|
|
222
|
-
|
|
223
|
-
<label><input type="checkbox"
|
|
224
|
-
|
|
409
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
410
|
+
name="refineExtremes">refineExtremes</label>
|
|
411
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
412
|
+
name="simplifyCorners">simplifyCorners</label>
|
|
413
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
414
|
+
name="simplifyRound">simplifyRound</label>
|
|
415
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="addExtremes">addExtremes</label>
|
|
225
416
|
|
|
226
417
|
<!--
|
|
227
418
|
<label><input type="checkbox" name="redraw"
|
|
228
419
|
data-info="try to redraw messed up paths based on extremes, semiextermes and corners">redraw</label>
|
|
229
420
|
|
|
230
|
-
-->
|
|
231
421
|
|
|
422
|
+
<label class="dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
423
|
+
name="addSemiExtremes">addSemiExtremes</label>
|
|
424
|
+
<label class="dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
425
|
+
name="harmonizeCpts">harmonizeCpts</label>
|
|
426
|
+
-->
|
|
232
427
|
|
|
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
428
|
|
|
236
429
|
</p>
|
|
237
430
|
</details>
|
|
@@ -240,10 +433,10 @@
|
|
|
240
433
|
<details>
|
|
241
434
|
<summary class="h3">Path directions</summary>
|
|
242
435
|
<p>
|
|
243
|
-
<label><input type="checkbox" name="reversePath"
|
|
436
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="reversePath"
|
|
244
437
|
data-info="Reverses path drawing direction">reversePath</label>
|
|
245
438
|
|
|
246
|
-
<label><input type="checkbox" name="fixDirections"
|
|
439
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="fixDirections"
|
|
247
440
|
data-info="Fixes sub path drawing directions to make fill rules obsolete">fixDirections</label>
|
|
248
441
|
</p>
|
|
249
442
|
</details>
|
|
@@ -251,9 +444,11 @@
|
|
|
251
444
|
<details open>
|
|
252
445
|
<summary class="h3">SVG output settings</summary>
|
|
253
446
|
<p>
|
|
254
|
-
<label><input type="checkbox" name="toRelative"
|
|
255
|
-
|
|
256
|
-
<label><input type="checkbox" name="
|
|
447
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="toRelative"
|
|
448
|
+
checked>toRelative</label>
|
|
449
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="toShorthands"
|
|
450
|
+
checked>toShorthands</label>
|
|
451
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="lineToCubic"
|
|
257
452
|
data-info="converts lines to cubics – helpful for morphing animations">lineToCubic</label>
|
|
258
453
|
|
|
259
454
|
</p>
|
|
@@ -264,11 +459,21 @@
|
|
|
264
459
|
<label><input type="radio" name="minifyD" value="2">beautify</label>
|
|
265
460
|
</p>
|
|
266
461
|
<p>
|
|
267
|
-
<label><input type="checkbox" name="autoAccuracy"
|
|
462
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="autoAccuracy"
|
|
268
463
|
data-info="takes an estimated suitable floating point accuracy based on smallest segment"
|
|
269
464
|
checked>autoAccuracy</label>
|
|
270
465
|
</p>
|
|
271
466
|
|
|
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
|
+
|
|
272
477
|
<p>
|
|
273
478
|
<label class="wdt-100">decimals <input type="number" name="decimals" min="0" value="1"
|
|
274
479
|
data-info="reduces floating point precision: reduces filesize significantly!"></label>
|
|
@@ -285,10 +490,11 @@
|
|
|
285
490
|
<details>
|
|
286
491
|
<summary class="h3">Polygon</summary>
|
|
287
492
|
<p>
|
|
288
|
-
<label class="--dsp-debug"><input type="checkbox" name="smoothPoly"
|
|
493
|
+
<label class="--dsp-debug"><input type="checkbox" data-type="checkbox-switch" name="smoothPoly"
|
|
289
494
|
data-info="Converts a polygon to smooth cubic beziers using the Philip J. Schneider curve fitting algorithm">smoothPoly</label>
|
|
290
495
|
|
|
291
|
-
<label class="--dsp-debug"><input type="checkbox"
|
|
496
|
+
<label class="--dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
497
|
+
name="toPolygon">toPolygon</label>
|
|
292
498
|
</p>
|
|
293
499
|
|
|
294
500
|
|
|
@@ -331,7 +537,7 @@
|
|
|
331
537
|
<textarea class="code" name="config" id="textConfig" data-tools="copy" data-ignore="true"
|
|
332
538
|
readonly></textarea>
|
|
333
539
|
</label>
|
|
334
|
-
<label><input type="checkbox" name="omitDefaults"
|
|
540
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="omitDefaults"
|
|
335
541
|
data-info="only include settings that are not defaults" checked>omitDefaults</label>
|
|
336
542
|
|
|
337
543
|
</p>
|
|
@@ -346,8 +552,19 @@
|
|
|
346
552
|
|
|
347
553
|
|
|
348
554
|
<header class="pst-sticky --pdd-1em z-ind-1000 pdd-1em">
|
|
349
|
-
|
|
350
|
-
|
|
555
|
+
|
|
556
|
+
<div class="header-nav">
|
|
557
|
+
<label class="navToggle"><input type="checkbox" name="showNav" class="showNav" id="showNav"
|
|
558
|
+
data-icon="adjustments-vertical" checked title="show settings" data-sync="showNav0"></label>
|
|
559
|
+
|
|
560
|
+
<a href="#" class="a-dialog" data-dialog="#about" data-dialog-title="Options" data-icon="question"
|
|
561
|
+
title="Available parameters"></a>
|
|
562
|
+
|
|
563
|
+
<button type="button" class="elzoomo-btn elzoomo-btn-zoomin" title="zoom in"
|
|
564
|
+
data-icon="plus"></button>
|
|
565
|
+
<button type="button" class="elzoomo-btn elzoomo-btn-zoomout" title="zoom out"
|
|
566
|
+
data-icon="minus"></button>
|
|
567
|
+
</div>
|
|
351
568
|
|
|
352
569
|
<a class="lnk-github" href="https://github.com/herrstrietzel/svg-path-simplify"
|
|
353
570
|
title="See github repository">
|
|
@@ -355,58 +572,80 @@
|
|
|
355
572
|
<use href="#github"></use>
|
|
356
573
|
</svg>
|
|
357
574
|
</a>
|
|
575
|
+
|
|
576
|
+
|
|
358
577
|
</header>
|
|
359
578
|
|
|
360
579
|
<footer class="footer pst-abs btt-0 lft-0 rgh-0 z-ind-1000">
|
|
361
580
|
<div class="footer-wrp --dsp-flx --alg-itm-cnt pdd-1em">
|
|
362
581
|
<p class="pReport txt-rgh" id="pReport"></p>
|
|
363
582
|
|
|
364
|
-
<div class="wrp-btns txt-rgh">
|
|
583
|
+
<div class="grd-btns grd grd-1 grd-ld-2 wrp-btns --txt-rgh">
|
|
584
|
+
|
|
585
|
+
<div class="col col-switch">
|
|
586
|
+
<p class="mrg-0">
|
|
587
|
+
<label><input type="checkbox" data-type="checkbox-switch" name="showMarkers"
|
|
588
|
+
checked>showMarkers</label>
|
|
589
|
+
|
|
590
|
+
<label><input type="checkbox" data-type="checkbox-switch"
|
|
591
|
+
name="showTransparency">showTransparency</label>
|
|
592
|
+
</p>
|
|
593
|
+
</div>
|
|
365
594
|
|
|
366
|
-
<
|
|
595
|
+
<div class="col col-btns grd grd-1">
|
|
367
596
|
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
597
|
+
<div class="col">
|
|
598
|
+
<!-- Share -->
|
|
599
|
+
<a href="#" class="drp-shd btn btn-default btn-download btn-neg" id="shareUrl"
|
|
600
|
+
data-icon="link">Share</a>
|
|
371
601
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
602
|
+
<!-- codepen -->
|
|
603
|
+
<form action="https://codepen.io/pen/define" method="POST" target="_blank"
|
|
604
|
+
class="form-codepen dsp-inl-blc">
|
|
605
|
+
<input id="inputCodepen" type="hidden" value="" name="data" data-ignore="true">
|
|
606
|
+
<button title="Edit in codepen"
|
|
607
|
+
class="drp-shd btn btnCodepen btn-default btn-download btn-neg" type="submit">
|
|
608
|
+
<span class="icn-wrp icn-wrp-codepen icn-wrp-left">
|
|
609
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icn-svg" viewBox="0 0 24 24"
|
|
610
|
+
fill="none" stroke="currentColor" stroke-width="2"
|
|
611
|
+
stroke-linecap="round" stroke-linejoin="round">
|
|
612
|
+
<path
|
|
613
|
+
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" />
|
|
614
|
+
</svg>
|
|
615
|
+
</span> Codepen
|
|
616
|
+
</button>
|
|
617
|
+
</form>
|
|
388
618
|
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
619
|
+
<!-- svg editor -->
|
|
620
|
+
<a class="drp-shd btn lnk-edit btn-default btn-download btn-neg" id="linkEdit"
|
|
621
|
+
title="Edit in svg-path-editor" target="_blank" rel="noopener noreferrer"
|
|
622
|
+
data-icon="pencil" href="">Edit</a>
|
|
393
623
|
|
|
394
624
|
|
|
395
|
-
|
|
396
|
-
<button id="btnCopy" class="drp-shd btn btn-default btn-download btn-neg btn-copy"
|
|
397
|
-
data-icon="copy">Copy</button>
|
|
625
|
+
</div>
|
|
398
626
|
|
|
399
|
-
|
|
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>
|
|
627
|
+
<div class="col">
|
|
403
628
|
|
|
629
|
+
<!-- copy -->
|
|
630
|
+
<button id="btnCopy" class="drp-shd btn btn-default btn-download btn-neg btn-copy"
|
|
631
|
+
data-icon="copy">Copy</button>
|
|
404
632
|
|
|
405
|
-
<!-- save multi -->
|
|
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>
|
|
409
633
|
|
|
634
|
+
<!-- save -->
|
|
635
|
+
<a href="#" data-name=""
|
|
636
|
+
class="drp-shd btn btn-default btn-download btn-neg btn-download-single"
|
|
637
|
+
id="btnDownload" data-icon="arrow-down-tray" download="simplified.svg"> Download
|
|
638
|
+
SVG</a>
|
|
639
|
+
|
|
640
|
+
|
|
641
|
+
<!-- save multi -->
|
|
642
|
+
<a href="#" data-name=""
|
|
643
|
+
class="drp-shd btn btn-default btn-download btn-download-multi btn-neg processing"
|
|
644
|
+
id="btnDownloadZip" data-icon="arrow-down-tray" download="simplified.zip"> Download
|
|
645
|
+
Zip</a>
|
|
646
|
+
|
|
647
|
+
</div>
|
|
648
|
+
</div>
|
|
410
649
|
|
|
411
650
|
|
|
412
651
|
</div>
|
|
@@ -421,9 +660,16 @@
|
|
|
421
660
|
<p class="fnt-siz-2em"><span data-icon="spinner"></span> Processing</p>
|
|
422
661
|
</div>
|
|
423
662
|
|
|
663
|
+
<!--
|
|
664
|
+
<div class="elzoomo-toolbar">
|
|
665
|
+
<button type="button" class="elzoomo-btn elzoomo-btn-zoomin" title="zoom in">+</button>
|
|
666
|
+
<button type="button" class="elzoomo-btn elzoomo-btn-zoomout" title="zoom out">−</button>
|
|
667
|
+
</div>
|
|
668
|
+
|
|
669
|
+
-->
|
|
424
670
|
|
|
425
671
|
<div class="wrp-zoom"
|
|
426
|
-
data-zoom='{"minScale":0.1,"maxScale":100,"zoom":1,"zoomStep":1.001, "toolbar":
|
|
672
|
+
data-zoom='{"minScale":0.1,"maxScale":100,"zoom":1,"zoomStep":1.001, "toolbar":false}'>
|
|
427
673
|
|
|
428
674
|
<svg id="svg" class="svgO" viewBox="0 0 100 100">
|
|
429
675
|
|
|
@@ -466,7 +712,138 @@
|
|
|
466
712
|
|
|
467
713
|
|
|
468
714
|
|
|
469
|
-
|
|
715
|
+
<dialog class="--dialog sr-only" id="about">
|
|
716
|
+
|
|
717
|
+
<h3 class="" dir="auto">Simplification parameters</h3>
|
|
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
|
+
|
|
846
|
+
</dialog>
|
|
470
847
|
|
|
471
848
|
<!--
|
|
472
849
|
<div id="spriteMap"></div>
|