svg-path-simplify 0.4.1 → 0.4.3

package/index.html

@@ -67,25 +67,25 @@
     <script src="demo/samples.js" defer></script>
 
     <!-- Md parser -->
-    <script src="https://cdn.jsdelivr.net/gh/UmemotoCtrl/mdpjs@0.1.4/js/mdp.min.js" async></script>
+    <script src="https://cdn.jsdelivr.net/gh/UmemotoCtrl/mdpjs@0.1.4/js/mdp.min.js" defer></script>
 
     <!-- Zip creation -->
     <script src="https://cdn.jsdelivr.net/npm/uzip@0.20201231.0/UZIP.min.js" async></script>
 
 
     <!-- UI helpers -->
-    <link rel="preload" href="https://cdn.jsdelivr.net/npm/enhance-inputs@0.3.7/dist/enhanceInputs.min.css"
-        as="style" />
 
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/enhance-inputs@0.3.7/dist/enhanceInputs.min.css">
-        <script src="https://cdn.jsdelivr.net/npm/enhance-inputs@0.3.7/dist/enhanceInputs.min.js" defer></script>
 
+    <link rel="preload" href="https://cdn.jsdelivr.net/npm/enhance-inputs@0.4.1/dist/enhanceInputs.min.css"
+        as="style" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/enhance-inputs@0.4.1/dist/enhanceInputs.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/enhance-inputs@0.4.1/dist/enhanceInputs.min.js" defer></script>
     <!-- 
-            <link rel="stylesheet" href="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.css">
-            <script src="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.js" defer></script>
+        
+        <link rel="stylesheet" href="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.css">
+        <script src="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.js" defer></script>
     -->
 
-
     <!-- 
         <script src="https://cdn.jsdelivr.net/npm/svg-path-simplify@0.1.2/dist/svg-path-simplify.min.js" defer></script>
     -->
@@ -124,53 +124,20 @@
                 </p>
 
                 <h1 class="txt-cnt h1">Simplify SVG files and path data</h1>
-                <h2 class="p txt-cnt">Optimizes SVG data by removing excessive commands and applying markup
+                <h2 class="p txt-cnt">Optimize and sanitize SVG data by removing excessive commands and applying markup
                     minifications such as coordinate rounding, relative and applicable shorthand commands</h2>
 
-                <p class="--btn-neg" data-ui="reset"></p>
-
-                <details>
-                    <summary class="h3">Privacy</summary>
-
-                    <h3>Simplification</h3>
-                    <p>Enter your SVG pathData or complete file markup or upload SVG files.</p>
-                    <p class="fnt-wgh-700">All data is processed 100% client-side – no data is transferred or analyzed
-                        by any third-party service during simplification.</p>
-
-                    <h3>Sharing and editing</h3>
-                    <ul>
-                        <li>Codepen – sends your current data to <a href="https://codepen.io">codepen.io</a> and creates
-                            a new pen
-                            for testing purposes</li>
-                        <li>Edit – sends data to <a href="https://yqnn.github.io/svg-path-editor">svg-path-editor</a>
-                            for further
-                            path node editing</li>
-                    </ul>
-
-                    <h3>External scripts</h3>
-                    <p>The webapp loads these external scripts from jsdelivr</p>
-                    <ul>
-                        <li><a href="https://github.com/WebReflection/linkedom">linkedom</a>
-                            – used for web worker based multi file
-                            processing</li>
-                        <li><a href="https://github.com/photopea/UZIP.js">UZIP</a>
-                            – for multifile zip exports</li>
-                        <li><a href="https://github.com/herrstrietzel/enhance-inputs">enhance-inputs</a>
-                            – used for GUI input
-                            styling and updating logic</li>
-                    </ul>
-
-                    <h3>Local Storage</h3>
-                    <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>
-                    <p>You image data is never transferred to the github server.</p>
-
-                </details>
+                <p>Use the usual shortcuts for copying, pasting or saving output: <kbd>Ctrl</kbd>/<kbd>⌘</kbd> +
+                    <kbd>C</kbd>, <kbd>Ctrl</kbd>/<kbd>⌘</kbd> + <kbd>V</kbd>,
+                    <kbd>Ctrl</kbd>/<kbd>⌘</kbd> + <kbd>S</kbd>
+                </p>
 
+                <!-- 
+                    <p class="--btn-neg" data-ui="reset"></p>
+                -->
 
                 <p><input type="file" class="dsp-non --btn-neg" id="inputFile" name="svgFile" value="upload"
-                        data-label="Upload SVG file/s" accept=".svg" data-ignore="true" multiple></p>
+                        data-label="Upload SVG file/s" accept=".svg" data-ignore multiple></p>
 
 
                 <p>
@@ -184,101 +151,139 @@
                     </textarea>
                 </label>
 
-                <details open>
-                    <summary class="h3">SVG cleanup</summary>
-                    <p>
-                        <!-- 
-                        <label><input type="checkbox" name="removePrologue" checked>removePrologue</label>
-                    -->
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="removeNameSpaced"
-                                aria-description="Graphic applications often add a lot of propriatary/custom attributes – not required for browser or exchange format usage"
-                                checked>removeNameSpaced</label>
+                <details open class="detailsRemoveElements">
+                    <summary class="h3">SVG elements/nodes</summary>
+
+                    <label><input type="checkbox" data-type="checkbox-switch" name="removeNameSpaced"
+                            aria-description="Graphic applications often add a lot of propriatary/custom elements – not required for browser or exchange format usage"
+                            checked>removeNameSpaced</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="removeComments"
-                                aria-description="Remove custom comments – disable it if you placed explanatory comments yourself"
-                                checked>removeComments</label>
+                    <label><input type="checkbox" data-type="checkbox-switch" name="cleanupDefs"
+                            aria-description="Removes empty defs and moves all defs to the top of the SVG markup – many environments struggle with footer placements (figma problem)"
+                            checked>cleanupDefs</label>
 
+                    <label><input type="checkbox" data-type="checkbox-switch" name="cleanupClip" checked
+                            aria-description="Removes unnecessary clip-paths – spanning the entire viewBox (e.g typical for figma)">cleanupClip</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="removeHidden"
-                                aria-description="Graphic applications usually don't exclude hidden layers – enable it to remove them to remove undesired bloat"
-                                checked>removeHidden</label>
+                    <label><input type="checkbox" data-type="checkbox-switch" name="removeOffCanvas"
+                            aria-description="Removes elements beyond viewBox/outside viewport">removeOffCanvas</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="cleanupDefs"
-                                aria-description="Removes empty defs and moves all defs to the top of the SVG markup – many environments struggle with footer placements (figma problem)"
-                                checked>cleanupDefs</label>
+                    <label><input type="checkbox" data-type="checkbox-switch" name="removeComments"
+                            aria-description="Remove custom comments – disable it if you placed explanatory comments yourself"
+                            checked>removeComments</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="cleanupClip" checked
-                                aria-description="Removes unnecessary clip-paths – spanning the entire viewBox (e.g typical for figma)">cleanupClip</label>
+                    <label><input type="checkbox" data-type="checkbox-switch" name="removeHidden"
+                            aria-description="Graphic applications usually don't exclude hidden layers – enable it to remove them to remove undesired bloat"
+                            checked>removeHidden</label>
 
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="cleanupSVGAtts"
-                                aria-description="Remove SVG non-presentational attributes from the root SVG"
-                                checked>cleanupSVGAtts</label>
+                    <!-- elements in current svg-->
+                    <div id="removeSvgElsWrp" class="enhancedInputsDynamic">
+                    </div>
+                </details>
 
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="removeOffCanvas"
-                                aria-description="Removes elements beyond viewBox/outside viewport">removeOffCanvas</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="unGroup"
-                                aria-description="Applications often add too many nest groups – removing also converts any styles to elements">unGroup</label>
+                <details open class="detailsRemoveSvgAttributes">
+                    <summary class="h3">SVG attributes</summary>
 
+                    <label><input type="checkbox" data-type="checkbox-switch" name="removeNameSpacedAtts"
+                            aria-description="Graphic applications often add a lot of propriatary/custom attributes – not required for browser or exchange format usage"
+                            checked>removeNameSpacedAtts</label>
 
-                        <!-- 
-                                
-                                <label><input type="checkbox" class="dsp-debug" name="convertTransforms">convertTransforms</label>
-                                -->
-                    </p>
+
+                    <label><input type="checkbox" data-type="checkbox-switch" name="cleanupSVGAtts"
+                            aria-description="Remove SVG non-presentational attributes from the root SVG"
+                            checked>cleanupSVGAtts</label>
+
+                    <label><input type="checkbox" data-type="checkbox-switch" name="allowMeta"
+                            aria-description="Allows metadata elements as well as title and description elements">allowMeta</label>
+
+                    <label><input type="checkbox" data-type="checkbox-switch" name="allowAriaAtts"
+                            aria-description="Allows accessibility related ARIA attributes – probably added on purpose"
+                            checked>allowAriaAtts</label>
+
+                    <label><input type="checkbox" data-type="checkbox-switch" name="allowDataAtts"
+                            aria-description="Allows custom data attributes – probably added on purpose"
+                            checked>allowDataAtts</label>
+
+                    <label><input type="checkbox" data-type="checkbox-switch" name="addViewBox" checked
+                            aria-description="Adds a viewBox attribute if missing – counter-productive if your SVG layout is fluid">addViewBox</label>
+
+                    <label><input type="checkbox" data-type="checkbox-switch" name="addDimensions"
+                            aria-description="Many graphic applications won't translate viewBox correctly to artboard/document size">addDimensions</label>
+
+                    <label><input type="checkbox" data-type="checkbox-switch"
+                            name="removeDimensions">removeDimensions</label>
+                    <label><input type="checkbox" data-type="checkbox-switch" name="removeIds"
+                            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>
+                    <label><input type="checkbox" data-type="checkbox-switch"
+                            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)"
+                            name="removeClassNames">removeClassNames</label>
+
+                    <label><input type="checkbox" data-type="checkbox-switch" name="omitNamespace"
+                            aria-description="Removes xmlns attribute - only recommended when embedding svg in DOM">omitNamespace</label>
+
+                    <div id="removeSVGAttsWrp" class="enhancedInputsDynamic">
+                    </div>
                 </details>
 
+
                 <details open>
                     <summary class="h3">SVG style optimization</summary>
                     <p>
+                        <!-- 
+                            <label><input type="checkbox" data-type="checkbox-switch" name="convertPathLength"
+                                    aria-description="Converts  pathLength attribute to absolute dasharray values – many graphic apps han't handle pathLength">convertPathLength</label>
+        
+                        -->
+                        <label><input type="checkbox" data-type="checkbox-switch" name="stylesToAttributes"
+                                aria-description="replaces inline styles with SVG atributes and removes obsolete attributes and styles">stylesToAttributes</label>
+
+
                         <label><input type="checkbox" data-type="checkbox-switch" name="cleanUpStrokes" checked
                                 aria-description="removes stroke attributes when stroke color is missing">cleanUpStrokes</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="stylesToAttributes"
-                                aria-description="replaces inline styles with SVG atributes and removes obsolete attributes and styles">stylesToAttributes</label>
+                        <label><input type="checkbox" data-type="checkbox-switch" name="attributesToGroup"
+                                aria-description="Try to combine style attributes in group">attributesToGroup</label>
 
                         <label><input type="checkbox" data-type="checkbox-switch" name="minifyRgbColors"
-                                aria-description="Minifies RGB colors e.g for fill, stroke or stop-color">minifyRgbColors</label>
-
+                                aria-description="Minifies RGB colors e.g for fill, stroke or stop-color"
+                                checked>minifyRgbColors</label>
 
                     </p>
 
                 </details>
 
 
-                <details open>
-                    <summary class="h3">SVG advanced conversions</summary>
+                <details open class="detailsRemoveElAttributes">
+                    <summary class="h3">Child attributes</summary>
 
-                    <p>
-                        <label><input type="checkbox" data-type="checkbox-switch" name="addViewBox" checked
-                                aria-description="Adds a viewBox attribute if missing – counter-productive if your SVG layout is fluid">addViewBox</label>
+                    <label><input type="checkbox" data-type="checkbox-switch" name="fixHref"
+                            aria-description="Replaces xlink:href with href – many applications still rely on xlink:href notation!">fixHref</label>
+
+                    <label><input type="checkbox" data-type="checkbox-switch" name="legacyHref"
+                            aria-description="Since many (non-browser) applications still depend on xlink:href notation you may convert href to xlink:href">legacyHref</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="addDimensions"
-                                aria-description="Many graphic applications won't translate viewBox correctly to artboard/document size">addDimensions</label>
+                    <!--dynamically added -->
+                    <div id="removeElAttsWrp" class="enhancedInputsDynamic ">
+                    </div>
+                </details>
 
 
+                <details open>
+                    <summary class="h3">SVG merging/splitting</summary>
+                    <p>
                         <label><input type="checkbox" data-type="checkbox-switch" name="mergePaths"
                                 aria-description="Merge adjacent paths – can minify file size but won't allow you to select individual paths">mergePaths</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch"
-                                name="removeDimensions">removeDimensions</label>
-                        <label><input type="checkbox" data-type="checkbox-switch" name="removeIds"
-                                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>
-                        <label><input type="checkbox" data-type="checkbox-switch"
-                                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)"
-                                name="removeClassNames">removeClassNames</label>
-
-                        <label><input type="checkbox" data-type="checkbox-switch" name="omitNamespace"
-                                aria-description="Removes xmlns attribute - only recommended when embedding svg in DOM">omitNamespace</label>
+                        <label><input type="checkbox" data-type="checkbox-switch" name="unGroup"
+                                aria-description="Applications often add too many nest groups – removing also converts any styles to elements">unGroup</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="fixHref"
-                                aria-description="Replaces xlink:href with href – many applications still rely on xlink:href notation!">fixHref</label>
+                        <label><input type="checkbox" data-type="checkbox-switch" name="splitCompound"
+                                aria-description="Tries to split compound paths  finding overlapping compound sub paths">splitCompound</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="legacyHref"
-                                aria-description="Since many (non-browser) applications still depend on xlink:href notation you may convert href to xlink:href">legacyHref</label>
 
                     </p>
 
@@ -322,17 +327,29 @@
                     </p>
 
                     <p>
-                        <label><input type="checkbox" data-type="checkbox-switch" name="convert_rects"
-                                aria-description="convert paths to rects if applicable">rects</label>
+                        <label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]" value="rect"
+                                checked aria-description="convert paths to rects if applicable">rects</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="convert_ellipses"
-                                aria-description="convert paths to circles or ellipses if applicable – ellipses/circles are usually more compact than paths – unless you merge paths">ellipses/circles</label>
+                        <label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]" value="circle"
+                                checked
+                                aria-description="convert paths to circles or ellipses if applicable – ellipses/circles are usually more compact than paths – unless you merge paths">circles</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="convert_poly"
-                                aria-description="convert paths to polys if applicable – polylines are quite inefficient as they are all absolute">polygons/polylines</label>
+                        <label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]" value="ellipse"
+                                checked
+                                aria-description="convert paths to circles or ellipses if applicable – ellipses/circles are usually more compact than paths – unless you merge paths">ellipse</label>
 
-                        <label><input type="checkbox" data-type="checkbox-switch" name="convert_lines"
-                                aria-description="convert paths to lines if applicable">lines</label>
+
+                        <label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]" value="polygon"
+                                checked
+                                aria-description="convert paths to polys if applicable – polylines are quite inefficient as they are all absolute">polygon</label>
+
+                        <label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]"
+                                value="polyline" checked
+                                aria-description="convert paths to polys if applicable – polylines are quite inefficient as they are all absolute">polyline</label>
+
+
+                        <label><input type="checkbox" data-type="checkbox-switch" name="convertShapes[]" value="line"
+                                checked aria-description="convert paths to lines if applicable">line</label>
                     </p>
 
 
@@ -393,7 +410,15 @@
                                 aria-description="Higher tolerance = sloppier approximations and more distortions – default 1"></label>
                     </p>
 
+
+
                     <p>
+
+                        <label><input type="checkbox" data-type="checkbox-switch" name="keepSmaller"
+                                aria-description="Ditches simplified output if original was more compact – useful for batch processing"
+                                checked>keepSmaller</label>
+
+
                         <label><input type="checkbox" data-type="checkbox-switch" name="simplifyBezier"
                                 aria-description="Tries to combine adjacent Bézier commands"
                                 checked>simplifyBezier</label>
@@ -531,10 +556,18 @@
                         -->
                     </p>
 
+                    <p>
+                        <label>Output Polygon
+                            <textarea class="outputPoly code" name="polyOut" id="polyOut" data-tools="size copy"
+                                data-ignore="true" readonly data-file="polygon.txt"></textarea>
+                        </label>
+                    </p>
+
+
                 </details>
 
 
-              <details open>
+                <details open>
                     <summary class="h3">SVG output settings</summary>
                     <p>
                         <label><input type="checkbox" data-type="checkbox-switch" name="toRelative"
@@ -543,6 +576,10 @@
                         <label><input type="checkbox" data-type="checkbox-switch" name="toShorthands"
                                 aria-description="Converts all commands to shorthand when applicable – reduces file size"
                                 checked>toShorthands</label>
+
+                        <label><input type="checkbox" data-type="checkbox-switch" name="toMixed"
+                                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>
+
                         <label><input type="checkbox" data-type="checkbox-switch" name="lineToCubic"
                                 aria-description="converts lines to cubics – helpful for morphing animations">lineToCubic</label>
 
@@ -553,6 +590,7 @@
                         <ul class="ul-bll">
                             <li><strong>Minify</strong> = maximum string minification – my lead to problems in older
                                 applications!</li>
+                            <li><strong>Safe</strong> = avoid floating point and arc param concatenation</li>
                             <li><strong>Verbose</strong> = don't omit command type tokens</li>
                             <li><strong>Beautify</strong>strong> = don't omit command type tokens and separate commands
                                 by new lines – handy for educational usage</li>
@@ -560,6 +598,7 @@
                     </details>
 
                     <p><label><input type="radio" name="minifyD" value="0" checked>minify</label>
+                        <label><input type="radio" name="minifyD" value="0.5">safe</label>
                         <label><input type="radio" name="minifyD" value="1">verbose</label>
                         <label><input type="radio" name="minifyD" value="2">beautify</label>
                     </p>
@@ -570,15 +609,14 @@
                     </p>
 
                     <p>
-                        <label class="wdt-100">decimals <input type="number" name="decimals" min="0" value="1"
-                                aria-description="Manual floating point rounding precision – overriden when autoAccuracy is enabled"></label>
+                        <label class="wdt-100">decimals <input type="number" name="decimals" min="-1" value="1"
+                                aria-description="Manual floating point rounding precision – overriden when autoAccuracy is enabled: -1 means no rounding"></label>
                     </p>
                 </details>
 
 
                 <details open>
                     <summary class="h3">Output</summary>
-
                     <p>
                         <label>Output SVG
                             <textarea class="outputSvg code" name="dOutput" id="outputSvg" data-tools="size copy"
@@ -586,16 +624,12 @@
                         </label>
                     </p>
 
-                    <p>
-                        <label>Output Polygon
-                            <textarea class="outputPoly code" name="polyOut" id="polyOut" data-tools="size copy"
-                                data-ignore="true" readonly data-file="polygon.txt"></textarea>
-                        </label>
-                    </p>
                 </details>
 
 
 
+                <!-- 
+                
                 <details>
                     <summary class="h3">Settings</summary>
                     <p>
@@ -609,6 +643,7 @@
 
                     </p>
                 </details>
+                -->
 
 
             </aside>
@@ -618,21 +653,39 @@
         <main class="main --spn-ld-2 --spn-ld-3 scrollbar scroll-content pst-rlt">
 
 
-            <header class="pst-sticky --pdd-1em z-ind-1000 pdd-1em">
+            <header class="header-top pst-sticky --pdd-1em z-ind-1000 pdd-1em">
 
                 <div class="header-nav">
+
+                    <!-- reset -->
+                    <button type="button" class="btn btnReset" title="Reset settings" data-icon="arrow-path"></button>
+
+
                     <label class="navToggle"><input type="checkbox" name="showNav" class="showNav" id="showNav"
                             data-icon="adjustments-vertical" checked title="show settings" data-sync="showNav0"></label>
 
+                    <!-- load about -->
                     <a href="#" class="a-dialog" data-dialog="#about" data-dialog-title="Options" data-icon="question"
                         title="Available parameters"></a>
 
+                    <!-- load privacy -->
+                    <a href="#" class="a-dialog" data-dialog="#privacy" data-dialog-title="privacy"
+                        data-icon="finger-print" title="Privacy"></a>
+
+
+                    <!-- presets -->
+                    <button type="button" class="btn btn-presets" title="Presets" data-icon="gear"
+                        data-menu-anchor="menu2"></button>
+
+
+
                     <button type="button" class="elzoomo-btn elzoomo-btn-zoomin" title="zoom in"
                         data-icon="plus"></button>
                     <button type="button" class="elzoomo-btn elzoomo-btn-zoomout" title="zoom out"
                         data-icon="minus"></button>
                 </div>
 
+                <!-- github link -->
                 <a class="lnk-github" href="https://github.com/herrstrietzel/svg-path-simplify"
                     title="See github repository">
                     <svg viewBox="0 0 24 24" class="icn-svg">
@@ -650,11 +703,23 @@
                     <div class="grd-btns grd grd-1 grd-ld-2 wrp-btns --txt-rgh">
 
                         <div class="col col-switch">
+                            <p class="mrg-0 radios-show-original">
+                                <label class="inl-blc"> <input type="radio" name="showOriginal" value="hide"
+                                        data-secondary="true" checked>optimized</label>
+                                <label class="inl-blc"> <input type="radio" name="showOriginal" value="show"
+                                        data-secondary="true">original</label>
+                            </p>
                             <p class="mrg-0">
-                                <label><input type="checkbox" data-type="checkbox-switch" name="showMarkers"
-                                        checked>showMarkers</label>
+                                <span>
+                                    <label><input type="checkbox" data-type="checkbox-switch" name="showMarkers"
+                                            data-secondary="true" checked>showMarkers</label>
+                                    <button type="button" class="btn btn-info btn-inline btn-menu btnConfig"
+                                        title="Edit marker size" data-icon="gear" data-menu-anchor="menu1"></button>
+
+                                </span>
+
 
-                                <label><input type="checkbox" data-type="checkbox-switch"
+                                <label><input type="checkbox" data-type="checkbox-switch" data-secondary="true"
                                         name="showTransparency">showTransparency</label>
                             </p>
                         </div>
@@ -747,15 +812,18 @@
                         <g id="markers"></g>
                     </svg>
 
-                    <div id="svgWrap" class="svgWrap"></div>
+                    <div id="svgWrap" class="svgWrap">
+                        <div id="svgWrapO" class="svgWrapO"></div>
+                        <div id="svgWrapS" class="svgWrapS"></div>
+                    </div>
+
+
                     <div id="svgWrapMulti" class="svgWrapMulti grd grd-2 grd-md-4 grd-ld-6 gap-1em"></div>
 
                 </div>
 
             </div>
 
-
-
         </main>
 
 
@@ -784,10 +852,143 @@
         </div>
     </dialog>
 
+    <dialog class="sr-only" id="privacy">
+        <div class="md-cnt" data-md="./docs/privacy-webapp.md">
+        </div>
+    </dialog>
+
+
+    <!-- menu presets -->
+    <div class="menu menu-presets menu-right-top  pdd-1em --menu-active" data-menu="menu2">
+        <h4 class="h4">Presets</h4>
+
+        <p>
+            <label>
+                <input data-secondary type="radio" name="preset" value="0" aria-description="Custom settings"
+                    checked>Custom
+            </label>
+        </p>
+        <!-- 
+        
+        -->
+
+        <p>
+            <label>
+                <input data-secondary type="radio" name="preset" value="null"
+                    aria-description="Disable all – passthrough">null
+            </label>
+        </p>
+
+        <p>
+            <label>
+                <input data-secondary type="radio" name="preset" value="default"
+                    aria-description="Back to default settings">default
+            </label>
+        </p>
+
+        <p>
+            <label>
+                <input data-secondary type="radio" name="preset" value="education"
+                    aria-description="Prettified output - all absolute and longhand commands">
+                education
+            </label>
+        </p>
+
+        <p>
+            <label>
+                <input data-secondary type="radio" name="preset" value="editor"
+                    aria-description="Maximum compatibility for graphic editors">
+                editor
+            </label>
+        </p>
+
+        <p>
+            <label>
+                <input data-secondary type="radio" name="preset" value="path"
+                    aria-description="Convert all shapes to paths">
+                path
+            </label>
+        </p>
+
+        <p>
+            <label>
+                <input data-secondary type="radio" name="preset" value="detransform"
+                    aria-description="Convert transforms to geometry">
+                detransform
+            </label>
+        </p>
+
+        <p>
+            <label>
+                <input data-secondary type="radio" name="preset" value="poly" aria-description="Convert Bézier to poly">
+                poly
+            </label>
+        </p>
+
+        <p>
+            <label>
+                <input data-secondary type="radio" name="preset" value="curvefit"
+                    aria-description="Convert polygon to Bézier">
+                curvefit
+            </label>
+        </p>
+
+
+        <p>
+            <label>
+                <input data-secondary type="radio" name="preset" value="noSimplification"
+                    aria-description="Retains original geometry but applies rounding, conversion to relative and shorthands">
+                noSimplification
+            </label>
+        </p>
+
+
+        <p>
+            <label>
+                <input data-secondary type="radio" name="preset" value="high"
+                    aria-description="Prioritize filesize: Enables more optimizations: cubicToArcs, mixed value compression simplification">
+                high
+            </label>
+        </p>
+
+        <details class="mrg-0-5em mrg-top">
+            <summary class="h4">Current settings</summary>
+            <p>
+                <label>Current Settings
+                    <textarea class="code" name="config" id="textConfig" data-tools="copy" data-secondary
+                        readonly></textarea>
+                </label>
+                <label><input type="checkbox" data-type="checkbox-switch" name="omitDefaults" data-secondary
+                        aria-description="only include settings that are not defaults" checked>omitDefaults</label>
+
+            </p>
+        </details>
+
+
+    </div>
+
+
+
+    <!-- menu marker size-->
+    <div class="menu menu-marker-size menu-top-right --menu-active" data-menu="menu1">
+        <p>
+            <label>Marker size
+                <input type="number" id="inpuMarkerSize" name="markerSize" value="0.3" min="0.05" max="1" step="0.05"
+                    data-ignore>
+            </label>
+        </p>
+    </div>
+
+
     <!-- 
         <div id="spriteMap"></div>
     -->
 
+
+
+
+
+
 </body>
 
 </html>