Fork of https://github.com/jakearchibald/svgomg - Google assets removed.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 39KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852
  1. <!doctype html>
  2. <html dropzone>
  3. <head>
  4. <title>SVGOMG - SVGO's Missing GUI</title>
  5. <meta name="theme-color" content="#303F9F">
  6. <meta name="viewport" content="width=device-width,minimum-scale=1">
  7. <link rel="preload" as="script" href="js/page.js">
  8. <link rel="preload" as="style" href="css/all.css">
  9. <style>
  10. html,body{
  11. height:100%;
  12. margin:0;
  13. padding:0;
  14. overflow:hidden
  15. }
  16. html{
  17. font-family:roboto, sans-serif;
  18. -webkit-tap-highlight-color:rgba(0,0,0,0);
  19. background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202%202%22%3E%3Cpath%20d%3D%22M1%202V0h1v1H0v1z%22%20fill-opacity%3D%22.05%22%2F%3E%3C%2Fsvg%3E");
  20. background-size:16px 16px;
  21. background-color:#f2f2f2;
  22. transition:background-color 0.2s ease-in-out
  23. }
  24. pre,code,kbd,samp,tt{
  25. font-family:monospace,monospace;
  26. font-size:1em
  27. }
  28. button::-moz-focus-inner,textarea::-moz-focus-inner{
  29. border:0;
  30. padding:0
  31. }
  32. .main-menu{
  33. position:absolute;
  34. top:0;
  35. left:0;
  36. bottom:0;
  37. right:0;
  38. z-index:3;
  39. font-family:sans-serif
  40. }
  41. .main-menu.hide-font{
  42. color:transparent
  43. }
  44. .main-menu.hide-font .menu-footer-notes{
  45. color:transparent
  46. }
  47. .main-menu.use-font{
  48. font-family:inherit
  49. }
  50. .main-menu.hidden{
  51. pointer-events:none
  52. }
  53. .main-menu .menu{
  54. position:absolute;
  55. top:0;
  56. left:0;
  57. bottom:0;
  58. min-width:264px;
  59. width:40%;
  60. max-width:340px;
  61. background:#fff;
  62. box-shadow:3px 0 16px rgba(0,0,0,0.4);
  63. will-change:transform;
  64. overflow-x:hidden;
  65. overflow-y:auto;
  66. display:-webkit-flex;
  67. display:flex;
  68. -webkit-flex-flow:column;
  69. flex-flow:column
  70. }
  71. .main-menu .menu.transition{
  72. -webkit-transition:-webkit-transform 0.2s ease-out;
  73. transition:transform 0.2s ease-out
  74. }
  75. .main-menu .menu.hidden{
  76. -webkit-transform:translateX(-110%);
  77. transform:translateX(-110%)
  78. }
  79. .main-menu .menu>*{
  80. min-height:-webkit-min-content;
  81. min-height:-moz-min-content;
  82. min-height:min-content
  83. }
  84. .main-menu .overlay{
  85. position:absolute;
  86. top:0;
  87. left:0;
  88. bottom:0;
  89. right:0;
  90. background:rgba(0,0,0,0.4);
  91. will-change:opacity
  92. }
  93. .main-menu .overlay.transition{
  94. -webkit-transition:opacity 0.2s ease-in-out;
  95. transition:opacity 0.2s ease-in-out
  96. }
  97. .main-menu .overlay.hidden{
  98. opacity:0
  99. }
  100. .main-menu ul{
  101. margin:0;
  102. padding:0
  103. }
  104. .main-menu li{
  105. display:block;
  106. margin:0;
  107. padding:0
  108. }
  109. .main-menu .menu-item{
  110. padding:0 16px;
  111. width:100%;
  112. height:48px;
  113. box-sizing:border-box;
  114. display:-webkit-flex;
  115. display:flex;
  116. -webkit-align-items:center;
  117. align-items:center
  118. }
  119. .main-menu .menu-item:link,.main-menu .menu-item:visited{
  120. color:inherit;
  121. text-decoration:none
  122. }
  123. .main-menu .menu-item:focus,.main-menu .menu-item:hover{
  124. outline:none;
  125. background:rgba(0,0,0,0.1)
  126. }
  127. .main-menu .menu-item .icon{
  128. width:24px;
  129. height:24px;
  130. opacity:0.54;
  131. margin-right:32px;
  132. -webkit-flex:none;
  133. flex:none
  134. }
  135. .main-menu .menu-item .spinner{
  136. -webkit-flex:none;
  137. flex:none;
  138. margin:0 0 0 auto
  139. }
  140. .main-menu .menu-item .menu-item-text{
  141. margin-right:28px;
  142. overflow:hidden;
  143. text-overflow:ellipsis
  144. }
  145. .main-menu .menu-input{
  146. cursor:pointer
  147. }
  148. .main-menu .menu-input .input-area{
  149. position:relative;
  150. white-space:nowrap
  151. }
  152. .main-menu .menu-input .label-txt{
  153. position:absolute;
  154. left:0;
  155. top:0
  156. }
  157. .main-menu .menu-input textarea,.main-menu .menu-input input{
  158. display:block;
  159. font:inherit;
  160. border:none;
  161. background:none;
  162. padding:0;
  163. margin:0;
  164. opacity:0;
  165. cursor:inherit;
  166. resize:none;
  167. width:100%;
  168. height:1.3em;
  169. overflow:hidden
  170. }
  171. .main-menu .menu-input textarea:focus,.main-menu .menu-input input:focus{
  172. outline:none;
  173. opacity:1
  174. }
  175. .main-menu .menu-input textarea:focus+.label-txt,.main-menu .menu-input input:focus+.label-txt{
  176. opacity:0;
  177. pointer-events:none
  178. }
  179. .main-menu .load-file-input{
  180. display:none
  181. }
  182. .menu-footer-notes{
  183. padding:0 16px;
  184. margin-top:auto;
  185. text-align:center;
  186. font-size:0.9rem;
  187. color:#8E8E8E
  188. }
  189. .menu-footer-notes a:link,.menu-footer-notes a:visited{
  190. color:inherit;
  191. text-decoration:underline
  192. }
  193. .menu-footer-notes a:hover,.menu-footer-notes a:active{
  194. color:#000
  195. }
  196. .preloader{
  197. position:absolute;
  198. top:0;
  199. left:0;
  200. right:0;
  201. bottom:0;
  202. background:rgba(0,0,0,0.7);
  203. z-index:3;
  204. color:#fff;
  205. opacity:0;
  206. font-family:sans-serif;
  207. display:-webkit-flex;
  208. display:flex;
  209. -webkit-flex-flow:column;
  210. flex-flow:column;
  211. -webkit-align-items:center;
  212. align-items:center;
  213. -webkit-justify-content:center;
  214. justify-content:center;
  215. -webkit-transition:opacity 0.2s ease-out;
  216. transition:opacity 0.2s ease-out
  217. }
  218. .preloader.active{
  219. opacity:1
  220. }
  221. .preloader.active .spinner{
  222. display:block
  223. }
  224. .preloader .spinner{
  225. display:none;
  226. border-color:#fff
  227. }
  228. .unbutton{
  229. display:inline-block;
  230. background:none;
  231. border:none;
  232. padding:0;
  233. margin:0;
  234. font:inherit;
  235. cursor:pointer;
  236. white-space:nowrap
  237. }
  238. .toolbar,.main,.drop-overlay{
  239. display:none
  240. }
  241. </style>
  242. <link rel="manifest" href="manifest.json">
  243. <link rel="apple-touch-icon-precomposed" href="imgs/icon.png">
  244. <link rel="icon" href="imgs/icon.png">
  245. <meta name="apple-mobile-web-app-capable" content="yes">
  246. <meta name="application-name" content="SVGOMG">
  247. </head>
  248. <body>
  249. <div class=app-output>
  250. <div class=main-menu>
  251. <div class=overlay></div>
  252. <nav class=menu>
  253. <ul>
  254. <li>
  255. <div tabindex=0 role=button class="load-file unbutton menu-item needsclick">
  256. <svg viewBox="0 0 24 24" class=icon>
  257. <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
  258. </svg>
  259. <span class=menu-item-text>Open SVG</span>
  260. </div>
  261. <input type=file class=load-file-input accept=.svg>
  262. </li>
  263. <li>
  264. <label class="menu-input menu-item">
  265. <svg viewBox="0 0 24 24" class=icon>
  266. <path d="M19 2h-4.2C14.4.8 13.3 0 12 0c-1.3 0-2.4.8-2.8 2H5C4 2 3 3 3 4v16c0 1 1 2 2 2h14c1 0 2-1 2-2V4c0-1-1-2-2-2zm-7 0c.6 0 1 .5 1 1s-.5 1-1 1-1-.5-1-1 .5-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/>
  267. </svg>
  268. <div class=input-area>
  269. <textarea class=paste-input></textarea>
  270. <span class=label-txt>Paste markup</span>
  271. </div>
  272. </label>
  273. </li>
  274. <li>
  275. <div tabindex=0 role=button class="load-demo unbutton menu-item">
  276. <svg viewBox="0 0 24 24" class=icon>
  277. <path d="M18.92 6c-.2-.58-.76-1-1.42-1h-11c-.66 0-1.2.42-1.42 1L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-6zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
  278. </svg>
  279. <span class=menu-item-text>Demo</span>
  280. </div>
  281. </li>
  282. <li>
  283. <a href=https://github.com/jakearchibald/svgomg class=menu-item>
  284. <svg viewBox="0 0 512 512" class=icon>
  285. <path d="M7 266.8c22.6-5.7 53.3-13.4 107-14.8-1.4-3-2.8-6-4-9.2-21-.2-85.4 2.8-107.5 8.2H2c-.6 0-1.3-.4-1.5-1.2-.2-1 .4-1.8 1.3-2 21.8-5.4 84.8-8.4 107-8.3-5-14.8-7.2-31.7-7.2-50.6 0-33.6 10.5-46.2 24.5-64-10.6-38.3 4-64.4 4-64.4s22.5-4.7 65 25.8c23.2-9.8 84.7-10.7 113.8-2.2 18-11.8 50.6-28.5 63.8-23.8 3.6 5.7 11.3 22.5 4.7 59.3 4.5 8 27.7 25.3 27.8 74-.2 18-2 33-5.6 45.8 55.6-.4 88.2 4 110.8 8.3.8.2 1.4 1 1.3 2-.2.7-1 1.3-1.6 1.3h-.5c-22.4-4-55.2-8.7-111-8.2-1 3.3-2 6.4-3.3 9.3 19 .7 71.2 2.8 113.8 15.8 1 .3 1.4 1.2 1 2 0 .8-.7 1.2-1.4 1.2h-.5c-43-13.2-96.5-15-114.2-15.6-15.4 34-47 46.6-98.3 51.8 16.6 10.5 21.3 23.6 21.3 59 0 35.5-.5 40.2-.3 48.4 0 13.4 19.7 19.8 19 24-.7 4.4-16.4 3.7-23.7 1-20.8-7-18.7-24.4-18.7-24.4l-.6-47.4s1.4-25.5-8-25.5V420c0 16.8 11.8 22 11.8 28 0 10.8-21.6-1-28.2-7.6-10-10-9-31.7-8.7-48.8.2-16.4-.2-52.5-.2-52.5l-6.8.3s3 78.7-3.6 93c-8.3 18.4-33.5 24.8-33.5 16.4 0-5.7 6.3-4 9.8-16.5 3-10.8 2-91 2-91s-8.2 4.8-8.2 19.8l-.2 57.8c0 14.8-20.8 23-31 23-5 0-11.3 0-11.3-2.8 0-6.8 19.2-10.8 19.2-25l-.3-43.8s-9.7 1.7-23.4 1.7c-34.6 0-45.6-22.2-50.8-34.6-6.8-16-15.6-23.7-25-29.7-5.7-3.7-7-8-.4-9.4 30.7-5.7 38.5 34.8 59 41.3 14.6 4.6 33.4 2.6 42.7-3.5 1.4-12.3 10.3-23 17.7-28.6-52-5-83-23-99-52-54.4 1.2-85.3 9-108 14.6L3 271.2h-.4c-.8 0-1.5-.5-1.6-1.2-.3-1 .3-1.8 1.2-2l4.8-1.2z"/>
  286. </svg>
  287. <span class=menu-item-text>Contribute</span>
  288. </a>
  289. </li>
  290. <li>
  291. <a href=https://github.com/jakearchibald/svgomg/blob/master/README.md class=menu-item>
  292. <svg viewBox="0 0 24 24" class=icon>
  293. <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
  294. </svg>
  295. <span class=menu-item-text>About</span>
  296. </a>
  297. </li>
  298. </ul>
  299. <div class=menu-extra></div>
  300. <div class=menu-footer-notes>
  301. <p>
  302. Powered by the incredible
  303. <a href=https://github.com/svg/svgo>SVGO</a>
  304. </p>
  305. </div>
  306. </nav>
  307. </div>
  308. <div class=toolbar>
  309. <div class=menu-toolbar-item>
  310. <button class="unbutton menu-btn">
  311. <svg viewBox="0 0 24 24">
  312. <title>Menu</title>
  313. <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  314. </svg>
  315. </button>
  316. </div>
  317. <form class="material-tabs view-toggler">
  318. <label class=material-tab>
  319. <input type=radio name=output value=image checked>
  320. <span class=selected></span>
  321. Image
  322. </label>
  323. <label class=material-tab>
  324. <input type=radio name=output value=code>
  325. <span class=selected></span>
  326. Markup
  327. </label>
  328. </form>
  329. </div>
  330. <div class=main>
  331. <div class=output>
  332. <div class=action-button-container>
  333. <div class=minor-action-container></div>
  334. <div class=results-container></div>
  335. </div>
  336. </div>
  337. <div class=settings>
  338. <div class=results-container-mobile></div>
  339. <div class=settings-scroller>
  340. <section class=global>
  341. <h1 class=settings-sub-heading>Global settings</h1>
  342. <div>
  343. <label class=setting-item-toggle>
  344. <input type=checkbox name=original>
  345. <span class=material-switch>
  346. <span class=track></span>
  347. <span class=handle></span>
  348. </span>
  349. Show original
  350. </label>
  351. </div>
  352. <div>
  353. <label class=setting-item-toggle>
  354. <input type=checkbox name=gzip checked>
  355. <span class=material-switch>
  356. <span class=track></span>
  357. <span class=handle></span>
  358. </span>
  359. Compare gzipped
  360. </label>
  361. </div>
  362. <div>
  363. <label class=setting-item-toggle>
  364. <input type=checkbox name=pretty>
  365. <span class=material-switch>
  366. <span class=track></span>
  367. <span class=handle></span>
  368. </span>
  369. Prettify markup
  370. </label>
  371. </div>
  372. <div>
  373. <label class=setting-item-range>
  374. <div class=label-text>Precision</div>
  375. <input type=range min=0 max=8 step=1 value=3 name=floatPrecision>
  376. </label>
  377. </div>
  378. </section>
  379. <section class=plugins>
  380. <h1 class=settings-sub-heading>Features</h1>
  381. <div>
  382. <label class=setting-item-toggle>
  383. <input type=checkbox name=removeDoctype checked>
  384. <span class=material-switch>
  385. <span class=track></span>
  386. <span class=handle></span>
  387. </span>
  388. Remove doctype
  389. </label>
  390. </div>
  391. <div>
  392. <label class=setting-item-toggle>
  393. <input type=checkbox name=removeXMLProcInst checked>
  394. <span class=material-switch>
  395. <span class=track></span>
  396. <span class=handle></span>
  397. </span>
  398. Remove XML instructions
  399. </label>
  400. </div>
  401. <div>
  402. <label class=setting-item-toggle>
  403. <input type=checkbox name=removeComments checked>
  404. <span class=material-switch>
  405. <span class=track></span>
  406. <span class=handle></span>
  407. </span>
  408. Remove comments
  409. </label>
  410. </div>
  411. <div>
  412. <label class=setting-item-toggle>
  413. <input type=checkbox name=removeMetadata checked>
  414. <span class=material-switch>
  415. <span class=track></span>
  416. <span class=handle></span>
  417. </span>
  418. Remove &lt;metadata>
  419. </label>
  420. </div>
  421. <div>
  422. <label class=setting-item-toggle>
  423. <input type=checkbox name=removeXMLNS>
  424. <span class=material-switch>
  425. <span class=track></span>
  426. <span class=handle></span>
  427. </span>
  428. Remove xmlns
  429. </label>
  430. </div>
  431. <div>
  432. <label class=setting-item-toggle>
  433. <input type=checkbox name=removeEditorsNSData checked>
  434. <span class=material-switch>
  435. <span class=track></span>
  436. <span class=handle></span>
  437. </span>
  438. Remove editor data
  439. </label>
  440. </div>
  441. <div>
  442. <label class=setting-item-toggle>
  443. <input type=checkbox name=cleanupAttrs checked>
  444. <span class=material-switch>
  445. <span class=track></span>
  446. <span class=handle></span>
  447. </span>
  448. Cleanup attribute whitespace
  449. </label>
  450. </div>
  451. <div>
  452. <label class=setting-item-toggle>
  453. <input type=checkbox name=inlineStyles checked>
  454. <span class=material-switch>
  455. <span class=track></span>
  456. <span class=handle></span>
  457. </span>
  458. Inline styles
  459. </label>
  460. </div>
  461. <div>
  462. <label class=setting-item-toggle>
  463. <input type=checkbox name=minifyStyles checked>
  464. <span class=material-switch>
  465. <span class=track></span>
  466. <span class=handle></span>
  467. </span>
  468. Minify styles
  469. </label>
  470. </div>
  471. <div>
  472. <label class=setting-item-toggle>
  473. <input type=checkbox name=convertStyleToAttrs checked>
  474. <span class=material-switch>
  475. <span class=track></span>
  476. <span class=handle></span>
  477. </span>
  478. Style to attributes
  479. </label>
  480. </div>
  481. <div>
  482. <label class=setting-item-toggle>
  483. <input type=checkbox name=cleanupIDs checked>
  484. <span class=material-switch>
  485. <span class=track></span>
  486. <span class=handle></span>
  487. </span>
  488. Clean IDs
  489. </label>
  490. </div>
  491. <div>
  492. <label class=setting-item-toggle>
  493. <input type=checkbox name=removeRasterImages>
  494. <span class=material-switch>
  495. <span class=track></span>
  496. <span class=handle></span>
  497. </span>
  498. Remove raster images
  499. </label>
  500. </div>
  501. <div>
  502. <label class=setting-item-toggle>
  503. <input type=checkbox name=removeUselessDefs checked>
  504. <span class=material-switch>
  505. <span class=track></span>
  506. <span class=handle></span>
  507. </span>
  508. Remove unused defs
  509. </label>
  510. </div>
  511. <div>
  512. <label class=setting-item-toggle>
  513. <input type=checkbox name=cleanupNumericValues checked>
  514. <span class=material-switch>
  515. <span class=track></span>
  516. <span class=handle></span>
  517. </span>
  518. Round/rewrite numbers
  519. </label>
  520. </div>
  521. <div>
  522. <label class=setting-item-toggle>
  523. <input type=checkbox name=cleanupListOfValues>
  524. <span class=material-switch>
  525. <span class=track></span>
  526. <span class=handle></span>
  527. </span>
  528. Round/rewrite number lists
  529. </label>
  530. </div>
  531. <div>
  532. <label class=setting-item-toggle>
  533. <input type=checkbox name=convertColors checked>
  534. <span class=material-switch>
  535. <span class=track></span>
  536. <span class=handle></span>
  537. </span>
  538. Minify colours
  539. </label>
  540. </div>
  541. <div>
  542. <label class=setting-item-toggle>
  543. <input type=checkbox name=removeUnknownsAndDefaults checked>
  544. <span class=material-switch>
  545. <span class=track></span>
  546. <span class=handle></span>
  547. </span>
  548. Remove unknowns & defaults
  549. </label>
  550. </div>
  551. <div>
  552. <label class=setting-item-toggle>
  553. <input type=checkbox name=removeNonInheritableGroupAttrs checked>
  554. <span class=material-switch>
  555. <span class=track></span>
  556. <span class=handle></span>
  557. </span>
  558. Remove unneeded group attrs
  559. </label>
  560. </div>
  561. <div>
  562. <label class=setting-item-toggle>
  563. <input type=checkbox name=removeUselessStrokeAndFill checked>
  564. <span class=material-switch>
  565. <span class=track></span>
  566. <span class=handle></span>
  567. </span>
  568. Remove useless stroke & fill
  569. </label>
  570. </div>
  571. <div>
  572. <label class=setting-item-toggle>
  573. <input type=checkbox name=removeViewBox checked>
  574. <span class=material-switch>
  575. <span class=track></span>
  576. <span class=handle></span>
  577. </span>
  578. Remove viewBox
  579. </label>
  580. </div>
  581. <div>
  582. <label class=setting-item-toggle>
  583. <input type=checkbox name=cleanupEnableBackground checked>
  584. <span class=material-switch>
  585. <span class=track></span>
  586. <span class=handle></span>
  587. </span>
  588. Remove/tidy enable-background
  589. </label>
  590. </div>
  591. <div>
  592. <label class=setting-item-toggle>
  593. <input type=checkbox name=removeHiddenElems checked>
  594. <span class=material-switch>
  595. <span class=track></span>
  596. <span class=handle></span>
  597. </span>
  598. Remove hidden elements
  599. </label>
  600. </div>
  601. <div>
  602. <label class=setting-item-toggle>
  603. <input type=checkbox name=removeEmptyText checked>
  604. <span class=material-switch>
  605. <span class=track></span>
  606. <span class=handle></span>
  607. </span>
  608. Remove empty text
  609. </label>
  610. </div>
  611. <div>
  612. <label class=setting-item-toggle>
  613. <input type=checkbox name=convertShapeToPath checked>
  614. <span class=material-switch>
  615. <span class=track></span>
  616. <span class=handle></span>
  617. </span>
  618. Shapes to (smaller) paths
  619. </label>
  620. </div>
  621. <div>
  622. <label class=setting-item-toggle>
  623. <input type=checkbox name=moveElemsAttrsToGroup checked>
  624. <span class=material-switch>
  625. <span class=track></span>
  626. <span class=handle></span>
  627. </span>
  628. Move attrs to parent group
  629. </label>
  630. </div>
  631. <div>
  632. <label class=setting-item-toggle>
  633. <input type=checkbox name=moveGroupAttrsToElems checked>
  634. <span class=material-switch>
  635. <span class=track></span>
  636. <span class=handle></span>
  637. </span>
  638. Move group attrs to elements
  639. </label>
  640. </div>
  641. <div>
  642. <label class=setting-item-toggle>
  643. <input type=checkbox name=collapseGroups checked>
  644. <span class=material-switch>
  645. <span class=track></span>
  646. <span class=handle></span>
  647. </span>
  648. Collapse useless groups
  649. </label>
  650. </div>
  651. <div>
  652. <label class=setting-item-toggle>
  653. <input type=checkbox name=convertPathData checked>
  654. <span class=material-switch>
  655. <span class=track></span>
  656. <span class=handle></span>
  657. </span>
  658. Round/rewrite paths
  659. </label>
  660. </div>
  661. <div>
  662. <label class=setting-item-toggle>
  663. <input type=checkbox name=convertTransform checked>
  664. <span class=material-switch>
  665. <span class=track></span>
  666. <span class=handle></span>
  667. </span>
  668. Round/rewrite transforms
  669. </label>
  670. </div>
  671. <div>
  672. <label class=setting-item-toggle>
  673. <input type=checkbox name=removeEmptyAttrs checked>
  674. <span class=material-switch>
  675. <span class=track></span>
  676. <span class=handle></span>
  677. </span>
  678. Remove empty attrs
  679. </label>
  680. </div>
  681. <div>
  682. <label class=setting-item-toggle>
  683. <input type=checkbox name=removeEmptyContainers checked>
  684. <span class=material-switch>
  685. <span class=track></span>
  686. <span class=handle></span>
  687. </span>
  688. Remove empty containers
  689. </label>
  690. </div>
  691. <div>
  692. <label class=setting-item-toggle>
  693. <input type=checkbox name=mergePaths checked>
  694. <span class=material-switch>
  695. <span class=track></span>
  696. <span class=handle></span>
  697. </span>
  698. Merge paths
  699. </label>
  700. </div>
  701. <div>
  702. <label class=setting-item-toggle>
  703. <input type=checkbox name=removeUnusedNS checked>
  704. <span class=material-switch>
  705. <span class=track></span>
  706. <span class=handle></span>
  707. </span>
  708. Remove unused namespaces
  709. </label>
  710. </div>
  711. <div>
  712. <label class=setting-item-toggle>
  713. <input type=checkbox name=sortAttrs>
  714. <span class=material-switch>
  715. <span class=track></span>
  716. <span class=handle></span>
  717. </span>
  718. Sort attrs
  719. </label>
  720. </div>
  721. <div>
  722. <label class=setting-item-toggle>
  723. <input type=checkbox name=removeTitle checked>
  724. <span class=material-switch>
  725. <span class=track></span>
  726. <span class=handle></span>
  727. </span>
  728. Remove &lt;title>
  729. </label>
  730. </div>
  731. <div>
  732. <label class=setting-item-toggle>
  733. <input type=checkbox name=removeDesc checked>
  734. <span class=material-switch>
  735. <span class=track></span>
  736. <span class=handle></span>
  737. </span>
  738. Remove &lt;desc>
  739. </label>
  740. </div>
  741. <div>
  742. <label class=setting-item-toggle>
  743. <input type=checkbox name=removeDimensions>
  744. <span class=material-switch>
  745. <span class=track></span>
  746. <span class=handle></span>
  747. </span>
  748. Prefer viewBox to width/height
  749. </label>
  750. </div>
  751. <div>
  752. <label class=setting-item-toggle>
  753. <input type=checkbox name=removeStyleElement>
  754. <span class=material-switch>
  755. <span class=track></span>
  756. <span class=handle></span>
  757. </span>
  758. Remove style elements
  759. </label>
  760. </div>
  761. <div>
  762. <label class=setting-item-toggle>
  763. <input type=checkbox name=removeScriptElement>
  764. <span class=material-switch>
  765. <span class=track></span>
  766. <span class=handle></span>
  767. </span>
  768. Remove script elements
  769. </label>
  770. </div>
  771. </section>
  772. <div class=setting-reset-row>
  773. <button class="unbutton setting-reset">Reset all</button>
  774. </div>
  775. </div>
  776. </div>
  777. </div>
  778. <div class=preloader>
  779. <div class=spinner>
  780. <div class=spinner-container>
  781. <div class=spinner-layer>
  782. <div class="circle-clipper left">
  783. <div class=circle></div>
  784. </div>
  785. <div class=gap-patch>
  786. <div class=circle></div>
  787. </div>
  788. <div class="circle-clipper right">
  789. <div class=circle></div>
  790. </div>
  791. </div>
  792. </div>
  793. </div>
  794. <p>Sorry, wasn't ready…</p>
  795. </div>
  796. <script>
  797. requestAnimationFrame(function() {
  798. requestAnimationFrame(function() {
  799. var l = document.createElement("link");
  800. l.rel = "stylesheet"
  801. l.crossorigin = !0;
  802. l.href = "css/all.css";
  803. document.head.appendChild(l);
  804. var s = document.createElement("script");
  805. s.src = "js/page.js";
  806. document.head.appendChild(s);
  807. })
  808. })
  809. </script>
  810. </div>
  811. </body>
  812. </html>