svg-path-simplify 0.4.6 → 0.4.7
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 +5 -0
- package/README.md +16 -14
- package/dist/svg-path-simplify.esm.js +6 -0
- package/dist/svg-path-simplify.esm.min.js +1 -1
- package/dist/svg-path-simplify.js +6 -0
- package/dist/svg-path-simplify.min.js +1 -1
- package/dist/svg-path-simplify.pathdata.esm.js +5 -0
- package/dist/svg-path-simplify.pathdata.esm.min.js +1 -1
- package/package.json +1 -1
- package/src/pathSimplify-main.js +3 -1
- package/src/svgii/pathData_convert.js +7 -0
- package/v/0.4.5/index.html +0 -1040
- package/v/0.4.5/svg-path-simplify.js +0 -13227
package/v/0.4.5/index.html
DELETED
|
@@ -1,1040 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
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">
|
|
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
|
-
<!--
|
|
19
|
-
<script type="application/ld+json">
|
|
20
|
-
{
|
|
21
|
-
"@context": "https://schema.org",
|
|
22
|
-
"@type": "SoftwareSourceCode",
|
|
23
|
-
"name": "SVG Path Simplify",
|
|
24
|
-
"codeRepository": "https://github.com/herrstrietzel/svg-path-simplify",
|
|
25
|
-
"programmingLanguage": "JavaScript",
|
|
26
|
-
"description": "A JavaScript library to simplify and optimize SVG path data."
|
|
27
|
-
}
|
|
28
|
-
</script>
|
|
29
|
-
-->
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<link rel="preload" href="../../demo/css/IBM-Plex-Sans_static/fonts/IBM-Plex-Sans/IBMPlexSans_latin_400.woff2" as="font"
|
|
34
|
-
type="font/woff2" crossorigin="anonymous">
|
|
35
|
-
<link rel="preload"
|
|
36
|
-
href="../../demo/css/IBM-Plex-Sans-Condensed_static/fonts/IBM-Plex-Sans-Condensed/IBMPlexSansCondensed_latin_700.woff2"
|
|
37
|
-
as="font" type="font/woff2" crossorigin="anonymous">
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
<!--
|
|
41
|
-
<link rel="stylesheet" href="demo/css/IBM-Plex-Sans_VF/css/IBM-Plex-Sans.css">
|
|
42
|
-
-->
|
|
43
|
-
|
|
44
|
-
<link rel="icon" href="../../favicon.svg" type="image/svg+xml">
|
|
45
|
-
<link rel="icon" type="image/png" href="../../demo/favicon/favicon-96x96.png" sizes="96x96" />
|
|
46
|
-
<!--
|
|
47
|
-
<link rel="shortcut icon" href="./demo/favicon/favicon.ico" />
|
|
48
|
-
-->
|
|
49
|
-
<link rel="apple-touch-icon" sizes="180x180" href="../../demo/favicon/apple-touch-icon.png" />
|
|
50
|
-
<meta name="apple-mobile-web-app-title" content="svg-path-simplify" />
|
|
51
|
-
<link rel="manifest" href="../../site.webmanifest" />
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<link rel="mask-icon" href="../../favicon.svg" color="#000000">
|
|
55
|
-
<meta name="theme-color" content="#f6f6f4">
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
<!--
|
|
59
|
-
<link rel="stylesheet" href="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.css">
|
|
60
|
-
<script src="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.js" defer></script>
|
|
61
|
-
|
|
62
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/enhance-inputs@latest/dist/enhanceInputs.css">
|
|
63
|
-
<script src="https://cdn.jsdelivr.net/npm/enhance-inputs@latest/dist/enhanceInputs.js" defer></script>
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@1.0.10/path-data-polyfill.min.js"></script>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
-->
|
|
70
|
-
<script src="../../demo/samples.js" defer></script>
|
|
71
|
-
|
|
72
|
-
<!-- Md parser -->
|
|
73
|
-
<!--
|
|
74
|
-
<script src="https://cdn.jsdelivr.net/gh/UmemotoCtrl/mdpjs@0.1.4/js/mdp.min.js" defer></script>
|
|
75
|
-
-->
|
|
76
|
-
|
|
77
|
-
<script src="https://cdn.jsdelivr.net/npm/mdpjs@0.0.5/dist/mdpjs.min.js"></script>
|
|
78
|
-
|
|
79
|
-
<!-- Zip creation -->
|
|
80
|
-
<script src="https://cdn.jsdelivr.net/npm/uzip@0.20201231.0/UZIP.min.js" async></script>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
<!-- UI helpers -->
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<link rel="preload" href="../../demo/css/app.css" as="style" />
|
|
87
|
-
|
|
88
|
-
<link rel="preload" href="https://cdn.jsdelivr.net/npm/enhance-inputs@0.4.1/dist/enhanceInputs.min.css"
|
|
89
|
-
as="style" />
|
|
90
|
-
|
|
91
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/enhance-inputs@0.4.1/dist/enhanceInputs.min.css">
|
|
92
|
-
|
|
93
|
-
<script src="https://cdn.jsdelivr.net/npm/enhance-inputs@0.4.1/dist/enhanceInputs.min.js" defer></script>
|
|
94
|
-
<!--
|
|
95
|
-
|
|
96
|
-
<link rel="stylesheet" href="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.css">
|
|
97
|
-
<script src="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.js" defer></script>
|
|
98
|
-
-->
|
|
99
|
-
|
|
100
|
-
<!--
|
|
101
|
-
<script src="https://cdn.jsdelivr.net/npm/svg-path-simplify@0.1.2/dist/svg-path-simplify.min.js" defer></script>
|
|
102
|
-
-->
|
|
103
|
-
|
|
104
|
-
<script src="svg-path-simplify.js" defer></script>
|
|
105
|
-
|
|
106
|
-
<link rel="stylesheet" href="../../demo/css/app.css">
|
|
107
|
-
|
|
108
|
-
<script src="../../demo/lib/elzoomo/elzoomo.js" defer></script>
|
|
109
|
-
|
|
110
|
-
<script src="../../demo/app.js" type="module"></script>
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
</head>
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
<body class="enhance-inputs-init --scrollbar --scroll-content pdd-0 mrg-0 enhance-detail-plus"
|
|
118
|
-
data-enhance-inputs='{"storageName":"svgPathSimplifyV0_4_5", "getQuery":true, "cacheToStorage":true,"icons":"all"}'
|
|
119
|
-
data-details='{"icon":"plus"}'>
|
|
120
|
-
|
|
121
|
-
<div class="grd-main hgh-100vh grd grd-md-3 grd-ld-5 gap-0">
|
|
122
|
-
<div class="sidebar-wrap scrollbar scroll-content scroll-track">
|
|
123
|
-
|
|
124
|
-
<header class="header-left dsp-inl-blc">
|
|
125
|
-
<label class="navToggle"><input type="checkbox" name="showNav0" class="showNav0 showNav" id="showNav0"
|
|
126
|
-
data-icon="adjustments-vertical" checked title="show settings" data-sync="showNav"></label>
|
|
127
|
-
</header>
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
<!--toolbars-->
|
|
131
|
-
<aside class="aside aside-1 hgh-100 aside scrollbar scroll-content-ld scroll-track pdd-1em pos-rlt">
|
|
132
|
-
|
|
133
|
-
<p class="txt-cnt mrg-0">
|
|
134
|
-
<img class="icn-logo " width="100" height="100"
|
|
135
|
-
src="https://herrstrietzel.github.io/svg-path-simplify/favicon.svg" alt="svg-path-simplify">
|
|
136
|
-
</p>
|
|
137
|
-
|
|
138
|
-
<h1 class="txt-cnt h1">Simplify SVG files and path data</h1>
|
|
139
|
-
<h2 class="p txt-cnt">Optimize and sanitize SVG data by removing excessive commands and applying markup
|
|
140
|
-
minifications such as coordinate rounding, relative and applicable shorthand commands</h2>
|
|
141
|
-
|
|
142
|
-
<p>Use the usual shortcuts for copying, pasting or saving output: <kbd>Ctrl</kbd>/<kbd>⌘</kbd> +
|
|
143
|
-
<kbd>C</kbd>, <kbd>Ctrl</kbd>/<kbd>⌘</kbd> + <kbd>V</kbd>,
|
|
144
|
-
<kbd>Ctrl</kbd>/<kbd>⌘</kbd> + <kbd>S</kbd>
|
|
145
|
-
</p>
|
|
146
|
-
|
|
147
|
-
<!--
|
|
148
|
-
<p class="--btn-neg" data-ui="reset"></p>
|
|
149
|
-
-->
|
|
150
|
-
|
|
151
|
-
<p><input type="file" class="dsp-non --btn-neg" id="inputFile" name="svgFile" value="upload"
|
|
152
|
-
data-label="Upload SVG file/s" accept=".svg" data-ignore multiple></p>
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
<p>
|
|
156
|
-
<label for="inputSamples" class="sr-only"> Select samples</label>
|
|
157
|
-
<select name="samples" id="inputSamples" data-options="samples"></select>
|
|
158
|
-
</p>
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
<label>Input SVG
|
|
162
|
-
<textarea class="inputSvg code" name="dInput" id="inputSvg" data-tools="size upload copy">M13 7 13 9 13 11C13 11.57 12.79 12.07 12.43 12.43 12.07 12.79 11.57 13 11 13L10 13 9.72 13C9.55 12.7 9.3 12.45 9 12.28L9 11 9 9.72C9.6 9.38 10 8.74 10 8 10 6.9 9.1 6 8 6 7.26 6 6.62 6.41 6.28 7L5.5 7 4 7C3.43 7 2.93 6.79 2.57 6.43 2.21 6.07 2 5.57 2 5 2 4.43 2.22 3.93 2.57 3.57 2.93 3.21 3.43 3 4 3L5.5 3 6.28 3C6.62 3.6 7.26 4 8 4 9.1 4 10 3.1 10 2 10 .9 9.1 0 8 0 7.26 0 6.62 .41 6.28 1L5.5 1 4 1C2.88 1 1.88 1.44 1.16 2.16 .44 2.88 0 3.88 0 5 0 6.12 .44 7.12 1.16 7.84 1.88 8.56 2.88 9 4 9L5.5 9 6.28 9C6.45 9.3 6.7 9.55 7 9.72L7 11 7 12.28C6.7 12.45 6.45 12.7 6.28 13L5 13 3.72 13C3.38 12.4 2.74 12 2 12 .9 12 0 12.9 0 14 0 15.1 .9 16 2 16 2.74 16 3.38 15.6 3.72 15L5 15 6.28 15C6.62 15.6 7.26 16 8 16 8.74 16 9.38 15.6 9.72 15L10 15 11 15C12.12 15 13.12 14.56 13.84 13.84 14.56 13.12 15 12.12 15 11L15 9 15 7 14 7 13 7zM8 1C8.55 1 9 1.45 9 2 9 2.55 8.55 3 8 3 7.45 3 7 2.55 7 2 7 1.45 7.45 1 8 1zM2 15C1.45 15 1 14.55 1 14 1 13.45 1.45 13 2 13 2.55 13 3 13.45 3 14 3 14.55 2.55 15 2 15zM8 7C8.55 7 9 7.45 9 8 9 8.55 8.55 9 8 9 7.45 9 7 8.55 7 8 7 7.45 7.45 7 8 7zM8 15C7.45 15 7 14.55 7 14 7 13.45 7.45 13 8 13 8.55 13 9 13.45 9 14 9 14.55 8.55 15 8 15zM14 0C12.9 0 12 .9 12 2 12 3.1 12.9 4 14 4 15.1 4 16 3.1 16 2 16 .9 15.1 0 14 0zM14 3C13.45 3 13 2.55 13 2 13 1.45 13.45 1 14 1 14.55 1 15 1.45 15 2 15 2.55 14.55 3 14 3z
|
|
163
|
-
</textarea>
|
|
164
|
-
</label>
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<details open class="detailsRemoveElements">
|
|
168
|
-
<summary class="h3">SVG elements/nodes</summary>
|
|
169
|
-
|
|
170
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="removeNameSpaced"
|
|
171
|
-
aria-description="Graphic applications often add a lot of propriatary/custom elements – not required for browser or exchange format usage"
|
|
172
|
-
checked>removeNameSpaced</label>
|
|
173
|
-
|
|
174
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="cleanupDefs"
|
|
175
|
-
aria-description="Removes empty defs and moves all defs to the top of the SVG markup – many environments struggle with footer placements (figma problem)"
|
|
176
|
-
checked>cleanupDefs</label>
|
|
177
|
-
|
|
178
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="cleanupClip" checked
|
|
179
|
-
aria-description="Removes unnecessary clip-paths – spanning the entire viewBox (e.g typical for figma)">cleanupClip</label>
|
|
180
|
-
|
|
181
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="removeOffCanvas"
|
|
182
|
-
aria-description="Removes elements beyond viewBox/outside viewport">removeOffCanvas</label>
|
|
183
|
-
|
|
184
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="removeComments"
|
|
185
|
-
aria-description="Remove custom comments – disable it if you placed explanatory comments yourself"
|
|
186
|
-
checked>removeComments</label>
|
|
187
|
-
|
|
188
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="removeHidden"
|
|
189
|
-
aria-description="Graphic applications usually don't exclude hidden layers – enable it to remove them to remove undesired bloat"
|
|
190
|
-
checked>removeHidden</label>
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
<!-- elements in current svg-->
|
|
194
|
-
<div id="removeSvgElsWrp" class="enhancedInputsDynamic">
|
|
195
|
-
</div>
|
|
196
|
-
</details>
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
<details open class="detailsRemoveSvgAttributes">
|
|
201
|
-
<summary class="h3">SVG attributes</summary>
|
|
202
|
-
|
|
203
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="removeNameSpacedAtts"
|
|
204
|
-
aria-description="Graphic applications often add a lot of propriatary/custom attributes – not required for browser or exchange format usage"
|
|
205
|
-
checked>removeNameSpacedAtts</label>
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="cleanupSVGAtts"
|
|
209
|
-
aria-description="Remove SVG non-presentational attributes from the root SVG"
|
|
210
|
-
checked>cleanupSVGAtts</label>
|
|
211
|
-
|
|
212
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="allowMeta"
|
|
213
|
-
aria-description="Allows metadata elements as well as title and description elements">allowMeta</label>
|
|
214
|
-
|
|
215
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="allowAriaAtts"
|
|
216
|
-
aria-description="Allows accessibility related ARIA attributes – probably added on purpose"
|
|
217
|
-
checked>allowAriaAtts</label>
|
|
218
|
-
|
|
219
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="allowDataAtts"
|
|
220
|
-
aria-description="Allows custom data attributes – probably added on purpose"
|
|
221
|
-
checked>allowDataAtts</label>
|
|
222
|
-
|
|
223
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="addViewBox" checked
|
|
224
|
-
aria-description="Adds a viewBox attribute if missing – counter-productive if your SVG layout is fluid">addViewBox</label>
|
|
225
|
-
|
|
226
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="addDimensions"
|
|
227
|
-
aria-description="Many graphic applications won't translate viewBox correctly to artboard/document size">addDimensions</label>
|
|
228
|
-
|
|
229
|
-
<label><input type="checkbox" data-type="checkbox-switch"
|
|
230
|
-
name="removeDimensions">removeDimensions</label>
|
|
231
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="removeIds"
|
|
232
|
-
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>
|
|
233
|
-
<label><input type="checkbox" data-type="checkbox-switch"
|
|
234
|
-
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)"
|
|
235
|
-
name="removeClassNames">removeClassNames</label>
|
|
236
|
-
|
|
237
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="omitNamespace"
|
|
238
|
-
aria-description="Removes xmlns attribute - only recommended when embedding svg in DOM">omitNamespace</label>
|
|
239
|
-
|
|
240
|
-
<div id="removeSVGAttsWrp" class="enhancedInputsDynamic">
|
|
241
|
-
</div>
|
|
242
|
-
</details>
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
<details open>
|
|
246
|
-
<summary class="h3">SVG style optimization</summary>
|
|
247
|
-
<p>
|
|
248
|
-
<!--
|
|
249
|
-
-->
|
|
250
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="stylesToAttributes"
|
|
251
|
-
aria-description="replaces inline styles with SVG atributes and removes obsolete attributes and styles">stylesToAttributes</label>
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="cleanUpStrokes" checked
|
|
255
|
-
aria-description="removes stroke attributes when stroke color is missing">cleanUpStrokes</label>
|
|
256
|
-
|
|
257
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="attributesToGroup"
|
|
258
|
-
aria-description="Try to combine style attributes in group">attributesToGroup</label>
|
|
259
|
-
|
|
260
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="minifyRgbColors"
|
|
261
|
-
aria-description="Minifies RGB colors e.g for fill, stroke or stop-color"
|
|
262
|
-
checked>minifyRgbColors</label>
|
|
263
|
-
|
|
264
|
-
</p>
|
|
265
|
-
|
|
266
|
-
</details>
|
|
267
|
-
|
|
268
|
-
<details open>
|
|
269
|
-
<summary class="h3">Unit conversion</summary>
|
|
270
|
-
|
|
271
|
-
<p>
|
|
272
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="convertPathLength"
|
|
273
|
-
aria-description="Converts pathLength attribute to absolute dasharray values – many graphic apps han't handle pathLength">convertPathLength</label>
|
|
274
|
-
|
|
275
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="toAbsoluteUnits"
|
|
276
|
-
aria-description="Converts relative units to absolute">toAbsoluteUnits</label>
|
|
277
|
-
</p>
|
|
278
|
-
|
|
279
|
-
</details>
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
<details open class="detailsRemoveElAttributes">
|
|
283
|
-
<summary class="h3">Child attributes</summary>
|
|
284
|
-
|
|
285
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="fixHref"
|
|
286
|
-
aria-description="Replaces xlink:href with href – many applications still rely on xlink:href notation!">fixHref</label>
|
|
287
|
-
|
|
288
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="legacyHref"
|
|
289
|
-
aria-description="Since many (non-browser) applications still depend on xlink:href notation you may convert href to xlink:href">legacyHref</label>
|
|
290
|
-
|
|
291
|
-
<!--dynamically added -->
|
|
292
|
-
<div id="removeElAttsWrp" class="enhancedInputsDynamic ">
|
|
293
|
-
</div>
|
|
294
|
-
</details>
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
<details open>
|
|
298
|
-
<summary class="h3">SVG merging/splitting</summary>
|
|
299
|
-
<p>
|
|
300
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="mergePaths"
|
|
301
|
-
aria-description="Merge adjacent paths – can minify file size but won't allow you to select individual paths">mergePaths</label>
|
|
302
|
-
|
|
303
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="unGroup"
|
|
304
|
-
aria-description="Applications often add too many nest groups – removing also converts any styles to elements">unGroup</label>
|
|
305
|
-
|
|
306
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="splitCompound"
|
|
307
|
-
aria-description="Tries to split compound paths finding overlapping compound sub paths">splitCompound</label>
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
</p>
|
|
311
|
-
|
|
312
|
-
</details>
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
<details open>
|
|
316
|
-
<summary class="h3">SVG pathdata conversions</summary>
|
|
317
|
-
<p>
|
|
318
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="arcToCubic"
|
|
319
|
-
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>
|
|
320
|
-
|
|
321
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="quadraticToCubic"
|
|
322
|
-
aria-description="Quadratic Béziers are highly efficient but rarely allow any simplification – keep it enabled unless you want to optimize your quadratic segments"
|
|
323
|
-
checked>quadraticToCubic</label>
|
|
324
|
-
</p>
|
|
325
|
-
|
|
326
|
-
</details>
|
|
327
|
-
|
|
328
|
-
<details open>
|
|
329
|
-
<summary class="h3">
|
|
330
|
-
SVG shape <−> path conversion
|
|
331
|
-
</summary>
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
<p>
|
|
335
|
-
<label>
|
|
336
|
-
<input type="radio" name="shapeConvert" aria-description="No conversion" value="0"
|
|
337
|
-
checked>keep
|
|
338
|
-
</label>
|
|
339
|
-
<label>
|
|
340
|
-
<input type="radio" name="shapeConvert"
|
|
341
|
-
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."
|
|
342
|
-
value="toPaths">shapesToPaths
|
|
343
|
-
</label>
|
|
344
|
-
<label>
|
|
345
|
-
<input type="radio" name="shapeConvert"
|
|
346
|
-
aria-description="Convert paths to shapes – if applicable"
|
|
347
|
-
value="toShapes">pathsToShapes
|
|
348
|
-
</label>
|
|
349
|
-
</p>
|
|
350
|
-
|
|
351
|
-
<p>
|
|
352
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]" value="rect"
|
|
353
|
-
checked aria-description="convert paths to rects if applicable">rects</label>
|
|
354
|
-
|
|
355
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]" value="circle"
|
|
356
|
-
checked
|
|
357
|
-
aria-description="convert paths to circles or ellipses if applicable – ellipses/circles are usually more compact than paths – unless you merge paths">circles</label>
|
|
358
|
-
|
|
359
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]" value="ellipse"
|
|
360
|
-
checked
|
|
361
|
-
aria-description="convert paths to circles or ellipses if applicable – ellipses/circles are usually more compact than paths – unless you merge paths">ellipse</label>
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]" value="polygon"
|
|
365
|
-
checked
|
|
366
|
-
aria-description="convert paths to polys if applicable – polylines are quite inefficient as they are all absolute">polygon</label>
|
|
367
|
-
|
|
368
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]"
|
|
369
|
-
value="polyline" checked
|
|
370
|
-
aria-description="convert paths to polys if applicable – polylines are quite inefficient as they are all absolute">polyline</label>
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]" value="line"
|
|
374
|
-
checked aria-description="convert paths to lines if applicable">line</label>
|
|
375
|
-
</p>
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
<details class="mrg-1em mrg-btt">
|
|
379
|
-
<summary data-summary='{"icon":"question"}' class="h4">Path vs. Shape?</summary>
|
|
380
|
-
<p>SVG shapes <em>can</em> often be more concise if they fall into the category of »primitives«
|
|
381
|
-
– so all significant geometrical parameters are described by a discrete number of
|
|
382
|
-
parameters. Elements of this class are <code><circle></code>,
|
|
383
|
-
<code><ellipse></code>, <code><ellipse></code> and <code><line></code>.
|
|
384
|
-
Besides, rimitives support relative percentages as units – handy for fluid layouts.
|
|
385
|
-
The <code><polygon></code> and <code><polyline></code> don't fall into this
|
|
386
|
-
category as the most significant attribute <code><points></code> (specifying the
|
|
387
|
-
vertices) allows an arbitrary array of point. These poly elements can always be expressed
|
|
388
|
-
more concisely with a <code><path></code> element as paths support advanced
|
|
389
|
-
minifications such as relative commands and shorthands for horizontal or vertical segments.
|
|
390
|
-
</p>
|
|
391
|
-
</details>
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
</details>
|
|
395
|
-
|
|
396
|
-
<details>
|
|
397
|
-
<summary class="h3">SVG/path transform</summary>
|
|
398
|
-
|
|
399
|
-
<p>
|
|
400
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="convertTransforms"
|
|
401
|
-
aria-description="Converts transforms to hard-coded geometry properties">convertTransforms</label>
|
|
402
|
-
|
|
403
|
-
</p>
|
|
404
|
-
|
|
405
|
-
<p>
|
|
406
|
-
<label>Scale <input type="number" value="1" min="0.00001" max="10000" name="scale"
|
|
407
|
-
step="0.1"></label>
|
|
408
|
-
</p>
|
|
409
|
-
<p>
|
|
410
|
-
<label>ScaleTo <input type="number" value="0" name="scaleTo"></label>
|
|
411
|
-
</p>
|
|
412
|
-
<p>
|
|
413
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="crop"
|
|
414
|
-
aria-description="crops svgs to tight bbox">crop</label>
|
|
415
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="alignToOrigin"
|
|
416
|
-
aria-description="aligns path to x/y 0 origin">alignToOrigin</label>
|
|
417
|
-
|
|
418
|
-
</p>
|
|
419
|
-
|
|
420
|
-
</details>
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
</aside>
|
|
424
|
-
|
|
425
|
-
<aside class="aside aside-2 pdd-1em pdd-top scrollbar scroll-content-ld scroll-track">
|
|
426
|
-
|
|
427
|
-
<details open>
|
|
428
|
-
<summary class="h3">Simplification</summary>
|
|
429
|
-
|
|
430
|
-
<p>
|
|
431
|
-
<label>tolerance<input type="number" name="tolerance" min="0.1" max="10" step="0.1" value="1"
|
|
432
|
-
aria-description="Higher tolerance = sloppier approximations and more distortions – default 1"></label>
|
|
433
|
-
</p>
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
<p>
|
|
438
|
-
|
|
439
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="keepSmaller"
|
|
440
|
-
aria-description="Ditches simplified output if original was more compact – useful for batch processing"
|
|
441
|
-
checked>keepSmaller</label>
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="simplifyBezier"
|
|
445
|
-
aria-description="Tries to combine adjacent Bézier commands"
|
|
446
|
-
checked>simplifyBezier</label>
|
|
447
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="removeZeroLength"
|
|
448
|
-
aria-description="Removes zero length segments – often accidentally added by apps"
|
|
449
|
-
checked>removeZeroLength</label>
|
|
450
|
-
|
|
451
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="optimizeOrder"
|
|
452
|
-
aria-description="Optimizes command order preferring top-left sorting and avoiding start points between adjacent Bézier segments"
|
|
453
|
-
checked>optimizeOrder</label>
|
|
454
|
-
|
|
455
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="refineClosing"
|
|
456
|
-
aria-description="Tries to replace a closing lineto with a Z command – ideally we can ditch one command"
|
|
457
|
-
checked>refineClosing</label>
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="removeColinear"
|
|
461
|
-
aria-description="Removes excessive colinear lineto commands – mostly affects line sequences or polygon inputs"
|
|
462
|
-
checked>removeColinear</label>
|
|
463
|
-
|
|
464
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="flatBezierToLinetos"
|
|
465
|
-
aria-description="Converts flat Bézier commands to simpler linetos"
|
|
466
|
-
checked>flatBezierToLinetos</label>
|
|
467
|
-
|
|
468
|
-
<!--
|
|
469
|
-
<label><input type="checkbox" name="extrapolateDominant"
|
|
470
|
-
aria-description="extrapolates dominant bezier segment – rather sloppy">extrapolateDominant</label>
|
|
471
|
-
-->
|
|
472
|
-
|
|
473
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="revertToQuadratics"
|
|
474
|
-
aria-description="Reverts cubic to quadratic Béziers if applicable"
|
|
475
|
-
checked>revertToQuadratics</label>
|
|
476
|
-
|
|
477
|
-
</p>
|
|
478
|
-
</details>
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
<details>
|
|
482
|
-
<summary class="h3">Limit simplification</summary>
|
|
483
|
-
<p>
|
|
484
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="keepExtremes"
|
|
485
|
-
aria-description="Extremes (tangent angle is horizontal or vertical) are visually significant – disable it only if you know what you're doing"
|
|
486
|
-
checked>keepExtremes</label>
|
|
487
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="keepCorners"
|
|
488
|
-
aria-description="Corners (adjacent tangent angle are rather »sharp«) are visually significant – disable it only if you know what you're doing"
|
|
489
|
-
checked>keepCorners</label>
|
|
490
|
-
|
|
491
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="keepInflections"
|
|
492
|
-
aria-description="Retain inflections e.g spine of an S shape – mainly useful for design/editing purposes">keepInflections</label>
|
|
493
|
-
</p>
|
|
494
|
-
</details>
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
<details>
|
|
498
|
-
<summary class="h3">Advanced simplifications</summary>
|
|
499
|
-
<p>
|
|
500
|
-
|
|
501
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="cubicToArc"
|
|
502
|
-
aria-description="Replaces Bézier segments by elliptic arc A commands where applicable – can reduce complexity for semi- or full circles">cubicToArc</label>
|
|
503
|
-
|
|
504
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="removeOrphanSubpaths"
|
|
505
|
-
aria-description="Remove orphaned M commands not connecting to lines or curve segments">removeOrphanSubpaths</label>
|
|
506
|
-
<label><input type="checkbox" data-type="checkbox-switch"
|
|
507
|
-
aria-description="Tries to combine commands close to an adjacent x/y extreme segment"
|
|
508
|
-
name="refineExtremes">refineExtremes</label>
|
|
509
|
-
<label><input type="checkbox" data-type="checkbox-switch"
|
|
510
|
-
aria-description="replaces Bézier segments enclosed by linetos with single quadratic commands – handy to reduce overly complex tiny corner roundings"
|
|
511
|
-
name="simplifyCorners">simplifyCorners</label>
|
|
512
|
-
|
|
513
|
-
<label><input type="checkbox" data-type="checkbox-switch"
|
|
514
|
-
aria-description="Will disable curve adjustment for quadratic corner roundings – usually more compact but less accurate"
|
|
515
|
-
name="simplifyQuadraticCorners">simplifyQuadraticCorners</label>
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
<label><input type="checkbox" data-type="checkbox-switch"
|
|
522
|
-
name="simplifyRound">simplifyRound</label>
|
|
523
|
-
<label><input type="checkbox" data-type="checkbox-switch"
|
|
524
|
-
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"
|
|
525
|
-
name="addExtremes">addExtremes</label>
|
|
526
|
-
|
|
527
|
-
<!--
|
|
528
|
-
<label><input type="checkbox" name="redraw"
|
|
529
|
-
aria-description="try to redraw messed up paths based on extremes, semiextermes and corners">redraw</label>
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
<label class="dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
533
|
-
name="addSemiExtremes">addSemiExtremes</label>
|
|
534
|
-
<label class="dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
535
|
-
name="harmonizeCpts">harmonizeCpts</label>
|
|
536
|
-
-->
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
</p>
|
|
540
|
-
</details>
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
<details>
|
|
544
|
-
<summary class="h3">Path directions</summary>
|
|
545
|
-
<p>
|
|
546
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="reversePath"
|
|
547
|
-
aria-description="Reverses path drawing direction - sometimes handy for line animations">reversePath</label>
|
|
548
|
-
|
|
549
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="fixDirections"
|
|
550
|
-
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>
|
|
551
|
-
</p>
|
|
552
|
-
</details>
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
<details>
|
|
556
|
-
<summary class="h3">Polygon</summary>
|
|
557
|
-
<p>
|
|
558
|
-
<label class="--dsp-debug"><input type="checkbox" data-type="checkbox-switch" name="smoothPoly"
|
|
559
|
-
aria-description="Converts a polygon to smooth cubic beziers using the Philip J. Schneider curve fitting algorithm">smoothPoly</label>
|
|
560
|
-
|
|
561
|
-
<label class="--dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
562
|
-
aria-description="Converts a path to polygon at specified precision"
|
|
563
|
-
name="toPolygon">toPolygon</label>
|
|
564
|
-
|
|
565
|
-
<label class="--dsp-debug"><input type="checkbox" data-type="checkbox-switch"
|
|
566
|
-
aria-description="Interpret poly vertices a s closed polygon or open polyline"
|
|
567
|
-
name="isClosed" checked>isClosed</label>
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
</p>
|
|
571
|
-
<p>
|
|
572
|
-
<label>precisionPoly<input type="number" name="precisionPoly" min="0.1" max="100" step="0.1"
|
|
573
|
-
value="1"
|
|
574
|
-
aria-description="Precision for polygon approximation – higher values add more vertices"></label>
|
|
575
|
-
</p>
|
|
576
|
-
|
|
577
|
-
<p class="h4">Polygon simplification</p>
|
|
578
|
-
<p>
|
|
579
|
-
<label class="">simplifyRDP<input type="number" min="0" max="500" step="0.1" value="0"
|
|
580
|
-
name="simplifyRDP" aria-description="Reduce vertices via Ramer-Douglas-Peucker"></label>
|
|
581
|
-
</p>
|
|
582
|
-
<p>
|
|
583
|
-
<label class="">simplifyRD<input type="number" min="0" max="500" step="0.1" value="0"
|
|
584
|
-
name="simplifyRD" aria-description="Reduce vertices via radial distance"></label>
|
|
585
|
-
</p>
|
|
586
|
-
|
|
587
|
-
<p>
|
|
588
|
-
<label class=""><input type="radio" name="polyFormat" value="object" checked>object</label>
|
|
589
|
-
<label class=""><input type="radio" name="polyFormat" value="array">array</label>
|
|
590
|
-
<label class=""><input type="radio" name="polyFormat" value="string">string</label>
|
|
591
|
-
<!--
|
|
592
|
-
<label class=""><input type="radio" name="polyFormat" value="d">pathdata</label>
|
|
593
|
-
-->
|
|
594
|
-
</p>
|
|
595
|
-
|
|
596
|
-
<p>
|
|
597
|
-
<label>Output Polygon
|
|
598
|
-
<textarea class="outputPoly code" name="polyOut" id="polyOut" data-tools="size copy"
|
|
599
|
-
data-ignore="true" readonly data-file="polygon.txt"></textarea>
|
|
600
|
-
</label>
|
|
601
|
-
</p>
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
</details>
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
<details open>
|
|
608
|
-
<summary class="h3">SVG output settings</summary>
|
|
609
|
-
<p>
|
|
610
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="toRelative"
|
|
611
|
-
aria-description="Converts all commands to relative – reduces file size"
|
|
612
|
-
checked>toRelative</label>
|
|
613
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="toShorthands"
|
|
614
|
-
aria-description="Converts all commands to shorthand when applicable – reduces file size"
|
|
615
|
-
checked>toShorthands</label>
|
|
616
|
-
|
|
617
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="toMixed"
|
|
618
|
-
aria-description="Choose the most compact command relative or absolute – you won't be able to change the start position as with all relative commands">toMixed</label>
|
|
619
|
-
|
|
620
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="lineToCubic"
|
|
621
|
-
aria-description="converts lines to cubics – helpful for morphing animations">lineToCubic</label>
|
|
622
|
-
|
|
623
|
-
</p>
|
|
624
|
-
|
|
625
|
-
<details>
|
|
626
|
-
<summary class="h4" data-summary='{"icon":"question"}'>SVG string optimization</summary>
|
|
627
|
-
<ul class="ul-bll">
|
|
628
|
-
<li><strong>Minify</strong> = maximum string minification – my lead to problems in older
|
|
629
|
-
applications!</li>
|
|
630
|
-
<li><strong>Safe</strong> = avoid floating point and arc param concatenation</li>
|
|
631
|
-
<li><strong>Verbose</strong> = don't omit command type tokens</li>
|
|
632
|
-
<li><strong>Beautify</strong>strong> = don't omit command type tokens and separate commands
|
|
633
|
-
by new lines – handy for educational usage</li>
|
|
634
|
-
</ul>
|
|
635
|
-
</details>
|
|
636
|
-
|
|
637
|
-
<p><label><input type="radio" name="minifyD" value="0" checked>minify</label>
|
|
638
|
-
<label><input type="radio" name="minifyD" value="0.5">safe</label>
|
|
639
|
-
<label><input type="radio" name="minifyD" value="1">verbose</label>
|
|
640
|
-
<label><input type="radio" name="minifyD" value="2">beautify</label>
|
|
641
|
-
</p>
|
|
642
|
-
<p>
|
|
643
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="autoAccuracy"
|
|
644
|
-
aria-description="Calculates a suitable floating point precision for coordinate rounding. Slightly conservative – decreasing by one decimal may work without significant distortions"
|
|
645
|
-
checked>autoAccuracy</label>
|
|
646
|
-
</p>
|
|
647
|
-
|
|
648
|
-
<p>
|
|
649
|
-
<label class="wdt-100">decimals <input type="number" name="decimals" min="-1" value="1" step="0.5"
|
|
650
|
-
aria-description="Manual floating point rounding precision – overriden when autoAccuracy is enabled: -1 means no rounding"></label>
|
|
651
|
-
</p>
|
|
652
|
-
</details>
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
<details open>
|
|
656
|
-
<summary class="h3">Output</summary>
|
|
657
|
-
<p>
|
|
658
|
-
<label>Output SVG
|
|
659
|
-
<textarea class="outputSvg code" name="dOutput" id="outputSvg" data-tools="size copy"
|
|
660
|
-
data-file="simple.svg"></textarea>
|
|
661
|
-
</label>
|
|
662
|
-
</p>
|
|
663
|
-
|
|
664
|
-
</details>
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
<!--
|
|
669
|
-
|
|
670
|
-
<details>
|
|
671
|
-
<summary class="h3">Settings</summary>
|
|
672
|
-
<p>
|
|
673
|
-
<label>Current Settings
|
|
674
|
-
<textarea class="code" name="config" id="textConfig" data-tools="copy" data-ignore="true"
|
|
675
|
-
readonly></textarea>
|
|
676
|
-
</label>
|
|
677
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="omitDefaults"
|
|
678
|
-
aria-description="only include settings that are not defaults"
|
|
679
|
-
checked>omitDefaults</label>
|
|
680
|
-
|
|
681
|
-
</p>
|
|
682
|
-
</details>
|
|
683
|
-
-->
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
</aside>
|
|
687
|
-
</div>
|
|
688
|
-
|
|
689
|
-
<!--main-->
|
|
690
|
-
<main class="main --spn-ld-2 --spn-ld-3 scrollbar scroll-content pst-rlt">
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
<header class="header-top pst-sticky --pdd-1em z-ind-1000 pdd-1em">
|
|
694
|
-
|
|
695
|
-
<div class="header-nav text-shadow">
|
|
696
|
-
|
|
697
|
-
<!-- reset -->
|
|
698
|
-
<button type="button" class="btn btnReset" title="Reset settings" data-icon="arrow-path"></button>
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
<label class="navToggle"><input type="checkbox" name="showNav" class="showNav" id="showNav"
|
|
702
|
-
data-icon="adjustments-vertical" checked title="show settings" data-sync="showNav0"></label>
|
|
703
|
-
|
|
704
|
-
<!-- load about -->
|
|
705
|
-
<a href="#" class="a-dialog" data-dialog="#about" data-dialog-title="Options" data-icon="question"
|
|
706
|
-
title="Available parameters"></a>
|
|
707
|
-
|
|
708
|
-
<!-- load privacy -->
|
|
709
|
-
<a href="#" class="a-dialog" data-dialog="#privacy" data-dialog-title="privacy"
|
|
710
|
-
data-icon="finger-print" title="Privacy"></a>
|
|
711
|
-
|
|
712
|
-
<!-- file info -->
|
|
713
|
-
<a href="#" class="a-dialog" id="btnFileInfo" data-dialog="#fileInfo" data-dialog-title="File info"
|
|
714
|
-
data-icon="light-bulb" title="File info and recommendations"></a>
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
<!-- presets -->
|
|
718
|
-
<button type="button" class="btn btn-presets" title="Presets" data-icon="gear"
|
|
719
|
-
data-menu-anchor="menu2"></button>
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
<button type="button" class="elzoomo-btn elzoomo-btn-zoomin" title="zoom in"
|
|
724
|
-
data-icon="plus"></button>
|
|
725
|
-
<button type="button" class="elzoomo-btn elzoomo-btn-zoomout" title="zoom out"
|
|
726
|
-
data-icon="minus"></button>
|
|
727
|
-
</div>
|
|
728
|
-
|
|
729
|
-
<!-- github link -->
|
|
730
|
-
<a class="lnk-github" href="https://github.com/herrstrietzel/svg-path-simplify"
|
|
731
|
-
title="See github repository">
|
|
732
|
-
<svg viewBox="0 0 24 24" class="icn-svg">
|
|
733
|
-
<use href="#github"></use>
|
|
734
|
-
</svg>
|
|
735
|
-
</a>
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
</header>
|
|
739
|
-
|
|
740
|
-
<footer class="footer pst-abs btt-0 lft-0 rgh-0 z-ind-1000">
|
|
741
|
-
<div class="footer-wrp --dsp-flx --alg-itm-cnt pdd-1em">
|
|
742
|
-
<p class="pReport txt-rgh" id="pReport"></p>
|
|
743
|
-
|
|
744
|
-
<div class="grd-btns grd grd-1 grd-ld-2 wrp-btns --txt-rgh">
|
|
745
|
-
|
|
746
|
-
<div class="col col-switch">
|
|
747
|
-
<p class="mrg-0 radios-show-original">
|
|
748
|
-
<label class="inl-blc"> <input type="radio" name="showOriginal" value="hide"
|
|
749
|
-
data-secondary="true" checked>optimized</label>
|
|
750
|
-
<label class="inl-blc"> <input type="radio" name="showOriginal" value="show"
|
|
751
|
-
data-secondary="true">original</label>
|
|
752
|
-
</p>
|
|
753
|
-
<p class="mrg-0">
|
|
754
|
-
<span>
|
|
755
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="showMarkers"
|
|
756
|
-
data-secondary="true" checked>showMarkers</label>
|
|
757
|
-
<button type="button" class="btn btn-info btn-inline btn-menu btnConfig"
|
|
758
|
-
title="Edit marker size" data-icon="ellipsis-horizontal" data-menu-anchor="menu1"></button>
|
|
759
|
-
|
|
760
|
-
</span>
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
<label><input type="checkbox" data-type="checkbox-switch" data-secondary="true"
|
|
764
|
-
name="showTransparency">showTransparency</label>
|
|
765
|
-
</p>
|
|
766
|
-
</div>
|
|
767
|
-
|
|
768
|
-
<div class="col col-btns grd grd-1">
|
|
769
|
-
|
|
770
|
-
<div class="col">
|
|
771
|
-
<!-- Share -->
|
|
772
|
-
<a href="#" class="drp-shd btn btn-default btn-download btn-neg" id="shareUrl"
|
|
773
|
-
data-icon="link">Share</a>
|
|
774
|
-
|
|
775
|
-
<!-- codepen -->
|
|
776
|
-
<form action="https://codepen.io/pen/define" method="POST" target="_blank"
|
|
777
|
-
class="form-codepen dsp-inl-blc">
|
|
778
|
-
<input id="inputCodepen" type="hidden" value="" name="data" data-ignore="true">
|
|
779
|
-
<button title="Edit in codepen"
|
|
780
|
-
class="drp-shd btn btnCodepen btn-default btn-download btn-neg" type="submit">
|
|
781
|
-
<span class="icn-wrp icn-wrp-codepen icn-wrp-left">
|
|
782
|
-
<svg xmlns="http://www.w3.org/2000/svg" class="icn-svg" viewBox="0 0 24 24"
|
|
783
|
-
fill="none" stroke="currentColor" stroke-width="2"
|
|
784
|
-
stroke-linecap="round" stroke-linejoin="round">
|
|
785
|
-
<path
|
|
786
|
-
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" />
|
|
787
|
-
</svg>
|
|
788
|
-
</span> Codepen
|
|
789
|
-
</button>
|
|
790
|
-
</form>
|
|
791
|
-
|
|
792
|
-
<!-- svg editor -->
|
|
793
|
-
<a class="drp-shd btn lnk-edit btn-default btn-download btn-neg" id="linkEdit"
|
|
794
|
-
title="Edit in svg-path-editor" target="_blank" rel="noopener noreferrer"
|
|
795
|
-
data-icon="pencil" href="">Edit</a>
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
</div>
|
|
799
|
-
|
|
800
|
-
<div class="col">
|
|
801
|
-
|
|
802
|
-
<!-- copy -->
|
|
803
|
-
<button id="btnCopy" class="drp-shd btn btn-default btn-download btn-neg btn-copy"
|
|
804
|
-
data-icon="copy">Copy</button>
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
<!-- save -->
|
|
808
|
-
<a href="#" data-name=""
|
|
809
|
-
class="drp-shd btn btn-default btn-download btn-neg btn-download-single"
|
|
810
|
-
id="btnDownload" data-icon="arrow-down-tray" download="simplified.svg"> Download
|
|
811
|
-
SVG</a>
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
<!-- save multi -->
|
|
815
|
-
<a href="#" data-name=""
|
|
816
|
-
class="drp-shd btn btn-default btn-download btn-download-multi btn-neg processing"
|
|
817
|
-
id="btnDownloadZip" data-icon="arrow-down-tray" download="simplified.zip"> Download
|
|
818
|
-
Zip</a>
|
|
819
|
-
|
|
820
|
-
</div>
|
|
821
|
-
</div>
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
</div>
|
|
825
|
-
|
|
826
|
-
</div>
|
|
827
|
-
</footer>
|
|
828
|
-
|
|
829
|
-
<!--preview-->
|
|
830
|
-
<div id="previewWrp" class="preview --pdd-1em pst-rlt">
|
|
831
|
-
|
|
832
|
-
<div class="wrp-loading pst-abs top-0">
|
|
833
|
-
<p class="fnt-siz-2em"><span data-icon="spinner"></span> Processing</p>
|
|
834
|
-
</div>
|
|
835
|
-
|
|
836
|
-
<!--
|
|
837
|
-
<div class="elzoomo-toolbar">
|
|
838
|
-
<button type="button" class="elzoomo-btn elzoomo-btn-zoomin" title="zoom in">+</button>
|
|
839
|
-
<button type="button" class="elzoomo-btn elzoomo-btn-zoomout" title="zoom out">−</button>
|
|
840
|
-
</div>
|
|
841
|
-
|
|
842
|
-
-->
|
|
843
|
-
|
|
844
|
-
<div class="wrp-zoom"
|
|
845
|
-
data-zoom='{"minScale":0.1,"maxScale":100,"zoom":1,"zoomStep":1.001, "toolbar":false}'>
|
|
846
|
-
|
|
847
|
-
<svg id="svg" class="svgO" viewBox="0 0 100 100">
|
|
848
|
-
|
|
849
|
-
<path id="path1" class="path pathO" d="M13 7 13 9 13 11C13 11.57 12.79 12.07 12.43 12.43 12.07 12.79 11.57 13 11 13L10 13 9.72 13C9.55 12.7 9.3 12.45 9 12.28L9 11 9 9.72C9.6 9.38 10 8.74 10 8 10 6.9 9.1 6 8 6 7.26 6 6.62 6.41 6.28 7L5.5 7 4 7C3.43 7 2.93 6.79 2.57 6.43 2.21 6.07 2 5.57 2 5 2 4.43 2.22 3.93 2.57 3.57 2.93 3.21 3.43 3 4 3L5.5 3 6.28 3C6.62 3.6 7.26 4 8 4 9.1 4 10 3.1 10 2 10 .9 9.1 0 8 0 7.26 0 6.62 .41 6.28 1L5.5 1 4 1C2.88 1 1.88 1.44 1.16 2.16 .44 2.88 0 3.88 0 5 0 6.12 .44 7.12 1.16 7.84 1.88 8.56 2.88 9 4 9L5.5 9 6.28 9C6.45 9.3 6.7 9.55 7 9.72L7 11 7 12.28C6.7 12.45 6.45 12.7 6.28 13L5 13 3.72 13C3.38 12.4 2.74 12 2 12 .9 12 0 12.9 0 14 0 15.1 .9 16 2 16 2.74 16 3.38 15.6 3.72 15L5 15 6.28 15C6.62 15.6 7.26 16 8 16 8.74 16 9.38 15.6 9.72 15L10 15 11 15C12.12 15 13.12 14.56 13.84 13.84 14.56 13.12 15 12.12 15 11L15 9 15 7 14 7 13 7zM8 1C8.55 1 9 1.45 9 2 9 2.55 8.55 3 8 3 7.45 3 7 2.55 7 2 7 1.45 7.45 1 8 1zM2 15C1.45 15 1 14.55 1 14 1 13.45 1.45 13 2 13 2.55 13 3 13.45 3 14 3 14.55 2.55 15 2 15zM8 7C8.55 7 9 7.45 9 8 9 8.55 8.55 9 8 9 7.45 9 7 8.55 7 8 7 7.45 7.45 7 8 7zM8 15C7.45 15 7 14.55 7 14 7 13.45 7.45 13 8 13 8.55 13 9 13.45 9 14 9 14.55 8.55 15 8 15zM14 0C12.9 0 12 .9 12 2 12 3.1 12.9 4 14 4 15.1 4 16 3.1 16 2 16 .9 15.1 0 14 0zM14 3C13.45 3 13 2.55 13 2 13 1.45 13.45 1 14 1 14.55 1 15 1.45 15 2 15 2.55 14.55 3 14 3z" />
|
|
850
|
-
<path id="pathS" class="path pathS" d="" />
|
|
851
|
-
|
|
852
|
-
<g id="markers"></g>
|
|
853
|
-
</svg>
|
|
854
|
-
|
|
855
|
-
<div id="svgWrap" class="svgWrap">
|
|
856
|
-
<div id="svgWrapO" class="svgWrapO"></div>
|
|
857
|
-
<div id="svgWrapS" class="svgWrapS"></div>
|
|
858
|
-
</div>
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
<div id="svgWrapMulti" class="svgWrapMulti grd grd-2 grd-md-4 grd-ld-6 gap-1em"></div>
|
|
862
|
-
|
|
863
|
-
</div>
|
|
864
|
-
|
|
865
|
-
</div>
|
|
866
|
-
|
|
867
|
-
</main>
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
</div>
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
<!-- markers to show commands -->
|
|
875
|
-
<svg id="svgMarkers" class="sr-only" style="width:0; height:0; position:absolute; z-index:-1;float:left;">
|
|
876
|
-
<defs>
|
|
877
|
-
<marker id="markerStart" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth"
|
|
878
|
-
markerWidth="10" markerHeight="10" orient="auto-start-reverse">
|
|
879
|
-
<circle cx="5" cy="5" r="3" fill="var(--color-focus, #ccc)"></circle>
|
|
880
|
-
|
|
881
|
-
<marker id="markerRound" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5"
|
|
882
|
-
markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
|
|
883
|
-
<circle cx="5" cy="5" r="2" fill="var(--color-focus, #ccc)"></circle>
|
|
884
|
-
</marker>
|
|
885
|
-
</defs>
|
|
886
|
-
</svg>
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
<!-- menu presets -->
|
|
891
|
-
<div class="menu menu-presets menu-right-top pdd-1em --menu-active" data-menu="menu2">
|
|
892
|
-
<p class="h4">Presets</p>
|
|
893
|
-
|
|
894
|
-
<p>
|
|
895
|
-
<label>
|
|
896
|
-
<input data-secondary type="radio" name="preset" value="0" aria-description="Custom settings"
|
|
897
|
-
checked>Custom
|
|
898
|
-
</label>
|
|
899
|
-
</p>
|
|
900
|
-
<!--
|
|
901
|
-
|
|
902
|
-
-->
|
|
903
|
-
|
|
904
|
-
<p>
|
|
905
|
-
<label>
|
|
906
|
-
<input data-secondary type="radio" name="preset" value="null"
|
|
907
|
-
aria-description="Disable all – passthrough">null
|
|
908
|
-
</label>
|
|
909
|
-
</p>
|
|
910
|
-
|
|
911
|
-
<p>
|
|
912
|
-
<label>
|
|
913
|
-
<input data-secondary type="radio" name="preset" value="default"
|
|
914
|
-
aria-description="Back to default settings">default
|
|
915
|
-
</label>
|
|
916
|
-
</p>
|
|
917
|
-
|
|
918
|
-
<p>
|
|
919
|
-
<label>
|
|
920
|
-
<input data-secondary type="radio" name="preset" value="education"
|
|
921
|
-
aria-description="Prettified output - all absolute and longhand commands">
|
|
922
|
-
education
|
|
923
|
-
</label>
|
|
924
|
-
</p>
|
|
925
|
-
|
|
926
|
-
<p>
|
|
927
|
-
<label>
|
|
928
|
-
<input data-secondary type="radio" name="preset" value="editor"
|
|
929
|
-
aria-description="Maximum compatibility for graphic editors">
|
|
930
|
-
editor
|
|
931
|
-
</label>
|
|
932
|
-
</p>
|
|
933
|
-
|
|
934
|
-
<p>
|
|
935
|
-
<label>
|
|
936
|
-
<input data-secondary type="radio" name="preset" value="path"
|
|
937
|
-
aria-description="Convert all shapes to paths">
|
|
938
|
-
path
|
|
939
|
-
</label>
|
|
940
|
-
</p>
|
|
941
|
-
|
|
942
|
-
<p>
|
|
943
|
-
<label>
|
|
944
|
-
<input data-secondary type="radio" name="preset" value="detransform"
|
|
945
|
-
aria-description="Convert transforms to geometry">
|
|
946
|
-
detransform
|
|
947
|
-
</label>
|
|
948
|
-
</p>
|
|
949
|
-
|
|
950
|
-
<p>
|
|
951
|
-
<label>
|
|
952
|
-
<input data-secondary type="radio" name="preset" value="poly" aria-description="Convert Bézier to poly">
|
|
953
|
-
poly
|
|
954
|
-
</label>
|
|
955
|
-
</p>
|
|
956
|
-
|
|
957
|
-
<p>
|
|
958
|
-
<label>
|
|
959
|
-
<input data-secondary type="radio" name="preset" value="curvefit"
|
|
960
|
-
aria-description="Convert polygon to Bézier">
|
|
961
|
-
curvefit
|
|
962
|
-
</label>
|
|
963
|
-
</p>
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
<p>
|
|
967
|
-
<label>
|
|
968
|
-
<input data-secondary type="radio" name="preset" value="noSimplification"
|
|
969
|
-
aria-description="Retains original geometry but applies rounding, conversion to relative and shorthands">
|
|
970
|
-
noSimplification
|
|
971
|
-
</label>
|
|
972
|
-
</p>
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
<p>
|
|
976
|
-
<label>
|
|
977
|
-
<input data-secondary type="radio" name="preset" value="high"
|
|
978
|
-
aria-description="Prioritize filesize: Enables more optimizations: cubicToArcs, mixed value compression simplification">
|
|
979
|
-
high
|
|
980
|
-
</label>
|
|
981
|
-
</p>
|
|
982
|
-
|
|
983
|
-
<details class="mrg-0-5em mrg-top">
|
|
984
|
-
<summary class="h4">Current settings</summary>
|
|
985
|
-
<p>
|
|
986
|
-
<label>Current Settings
|
|
987
|
-
<textarea class="code" name="config" id="textConfig" data-tools="copy" data-secondary
|
|
988
|
-
readonly></textarea>
|
|
989
|
-
</label>
|
|
990
|
-
<label><input type="checkbox" data-type="checkbox-switch" name="omitDefaults" data-secondary
|
|
991
|
-
aria-description="only include settings that are not defaults" checked>omitDefaults</label>
|
|
992
|
-
|
|
993
|
-
</p>
|
|
994
|
-
</details>
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
</div>
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
<!-- dialogs -->
|
|
1001
|
-
<dialog class="--dialog sr-only" id="about">
|
|
1002
|
-
<div class="md-cnt" data-md="./docs/api.md">
|
|
1003
|
-
</div>
|
|
1004
|
-
</dialog>
|
|
1005
|
-
|
|
1006
|
-
<dialog class="sr-only" id="privacy">
|
|
1007
|
-
<div class="md-cnt" data-md="./docs/privacy-webapp.md">
|
|
1008
|
-
</div>
|
|
1009
|
-
</dialog>
|
|
1010
|
-
|
|
1011
|
-
<dialog class="sr-only fileInfo" id="fileInfo">
|
|
1012
|
-
<div class="--md-cnt" id="fileInfoReport">
|
|
1013
|
-
</div>
|
|
1014
|
-
</dialog>
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
<!-- menu marker size-->
|
|
1019
|
-
<div class="menu menu-marker-size menu-top-right --menu-active" data-menu="menu1">
|
|
1020
|
-
<p>
|
|
1021
|
-
<label>Marker size
|
|
1022
|
-
<input type="number" id="inpuMarkerSize" name="markerSize" value="0.3" min="0.05" max="1" step="0.05"
|
|
1023
|
-
data-ignore>
|
|
1024
|
-
</label>
|
|
1025
|
-
</p>
|
|
1026
|
-
</div>
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
<!--
|
|
1030
|
-
<div id="spriteMap"></div>
|
|
1031
|
-
-->
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
</body>
|
|
1039
|
-
|
|
1040
|
-
</html>
|