donghanyang
/
Dbqb_Study
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
提交学习笔记专用
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.
126 Commits
8 Branches
0 Tags
172 MiB
Tree: 4033a1089a
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '4033a1089a'
${ noResults }
Dbqb_Study/吴光慧学习笔记/11.1/study/node_modules/svgo/README.md

294 lines
22 KiB
Raw Normal View History

吴光慧11.1学习笔记
3 weeks ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <div align="center">
  2. <img src="./logo/logo-web.svg" width="348.61" height="100" alt="SVGO logo"/>
  3. </div>
  5. ## SVGO [![npm version](https://img.shields.io/npm/v/svgo)](https://npmjs.org/package/svgo) [![Discord](https://img.shields.io/discord/815166721315831868)](https://discord.gg/z8jX8NYxrE)
  7. **SVG O**ptimizer is a Node.js-based tool for optimizing SVG vector graphics files.
  9. ## Why?
  11. SVG files, especially those exported from various editors, usually contain a lot of redundant and useless information. This can include editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting the SVG rendering result.
  13. ## Installation
  15. ```sh
  16. npm -g install svgo
  17. ```
  19. or
  21. ```sh
  22. yarn global add svgo
  23. ```
  25. ## CLI usage
  27. ```sh
  28. svgo one.svg two.svg -o one.min.svg two.min.svg
  29. ```
  31. Or use the `--folder`/`-f` flag to optimize a whole folder of SVG icons
  33. ```sh
  34. svgo -f ./path/to/folder/with/svg/files -o ./path/to/folder/with/svg/output
  35. ```
  37. See help for advanced usage
  39. ```sh
  40. svgo --help
  41. ```
  43. ## Configuration
  45. Some options can be configured with CLI though it may be easier to have the configuration in a separate file.
  46. SVGO automatically loads configuration from `svgo.config.js` or module specified with `--config` flag.
  48. ```js
  49. module.exports = {
  50. multipass: true, // boolean. false by default
  51. datauri: 'enc', // 'base64', 'enc' or 'unenc'. 'base64' by default
  52. js2svg: {
  53. indent: 2, // string with spaces or number of spaces. 4 by default
  54. pretty: true, // boolean, false by default
  55. },
  56. };
  57. ```
  59. SVGO has a plugin-based architecture, so almost every optimization is a separate plugin.
  60. There is a set of [built-in plugins](#built-in-plugins). See how to configure them:
  62. ```js
  63. module.exports = {
  64. plugins: [
  65. // enable a built-in plugin by name
  66. 'prefixIds',
  68. // or by expanded version
  69. {
  70. name: 'prefixIds',
  71. },
  73. // some plugins allow/require to pass options
  74. {
  75. name: 'prefixIds',
  76. params: {
  77. prefix: 'my-prefix',
  78. },
  79. },
  80. ],
  81. };
  82. ```
  84. The default preset of plugins is fully overridden if the `plugins` field is specified.
  85. Use `preset-default` plugin to customize plugins options.
  87. ```js
  88. module.exports = {
  89. plugins: [
  90. {
  91. name: 'preset-default',
  92. params: {
  93. overrides: {
  94. // customize options for plugins included in preset
  95. inlineStyles: {
  96. onlyMatchedOnce: false,
  97. },
  99. // or disable plugins
  100. removeDoctype: false,
  101. },
  102. },
  103. },
  105. // enable builtin plugin not included in default preset
  106. 'prefixIds',
  108. // enable and configure builtin plugin not included in preset
  109. {
  110. name: 'sortAttrs',
  111. params: {
  112. xmlnsOrder: 'alphabetical',
  113. },
  114. },
  115. ],
  116. };
  117. ```
  119. Default preset includes the following list of plugins:
  121. - removeDoctype
  122. - removeXMLProcInst
  123. - removeComments
  124. - removeMetadata
  125. - removeEditorsNSData
  126. - cleanupAttrs
  127. - mergeStyles
  128. - inlineStyles
  129. - minifyStyles
  130. - cleanupIDs
  131. - removeUselessDefs
  132. - cleanupNumericValues
  133. - convertColors
  134. - removeUnknownsAndDefaults
  135. - removeNonInheritableGroupAttrs
  136. - removeUselessStrokeAndFill
  137. - removeViewBox
  138. - cleanupEnableBackground
  139. - removeHiddenElems
  140. - removeEmptyText
  141. - convertShapeToPath
  142. - convertEllipseToCircle
  143. - moveElemsAttrsToGroup
  144. - moveGroupAttrsToElems
  145. - collapseGroups
  146. - convertPathData
  147. - convertTransform
  148. - removeEmptyAttrs
  149. - removeEmptyContainers
  150. - mergePaths
  151. - removeUnusedNS
  152. - sortDefsChildren
  153. - removeTitle
  154. - removeDesc
  156. It's also possible to specify a custom plugin:
  158. ```js
  159. const anotherCustomPlugin = require('./another-custom-plugin.js');
  160. module.exports = {
  161. plugins: [
  162. {
  163. name: 'customPluginName',
  164. type: 'perItem', // 'perItem', 'perItemReverse' or 'full'
  165. params: {
  166. optionName: 'optionValue',
  167. },
  168. fn: (ast, params, info) => {},
  169. },
  170. anotherCustomPlugin,
  171. ],
  172. };
  173. ```
  175. ## API usage
  177. SVGO provides a few low level utilities.
  179. ### optimize
  181. The core of SVGO is `optimize` function.
  183. ```js
  184. const { optimize } = require('svgo');
  185. const result = optimize(svgString, {
  186. // optional but recommended field
  187. path: 'path-to.svg',
  188. // all config fields are also available here
  189. multipass: true,
  190. });
  191. const optimizedSvgString = result.data;
  192. ```
  194. ### loadConfig
  196. If you write a tool on top of SVGO you might need a way to load SVGO config.
  198. ```js
  199. const { loadConfig } = require('svgo');
  200. const config = await loadConfig();
  202. // you can also specify a relative or absolute path and customize the current working directory
  203. const config = await loadConfig(configFile, cwd);
  204. ```
  206. ## Built-in plugins
  208. | Plugin | Description | Default |
  209. | ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
  210. | [cleanupAttrs](https://github.com/svg/svgo/blob/master/plugins/cleanupAttrs.js) | cleanup attributes from newlines, trailing, and repeating spaces | `enabled` |
  211. | [mergeStyles](https://github.com/svg/svgo/blob/master/plugins/mergeStyles.js) | merge multiple style elements into one | `enabled` |
  212. | [inlineStyles](https://github.com/svg/svgo/blob/master/plugins/inlineStyles.js) | move and merge styles from `<style>` elements to element `style` attributes | `enabled` |
  213. | [removeDoctype](https://github.com/svg/svgo/blob/master/plugins/removeDoctype.js) | remove `doctype` declaration | `enabled` |
  214. | [removeXMLProcInst](https://github.com/svg/svgo/blob/master/plugins/removeXMLProcInst.js) | remove XML processing instructions | `enabled` |
  215. | [removeComments](https://github.com/svg/svgo/blob/master/plugins/removeComments.js) | remove comments | `enabled` |
  216. | [removeMetadata](https://github.com/svg/svgo/blob/master/plugins/removeMetadata.js) | remove `<metadata>` | `enabled` |
  217. | [removeTitle](https://github.com/svg/svgo/blob/master/plugins/removeTitle.js) | remove `<title>` | `enabled` |
  218. | [removeDesc](https://github.com/svg/svgo/blob/master/plugins/removeDesc.js) | remove `<desc>` | `enabled` |
  219. | [removeUselessDefs](https://github.com/svg/svgo/blob/master/plugins/removeUselessDefs.js) | remove elements of `<defs>` without `id` | `enabled` |
  220. | [removeXMLNS](https://github.com/svg/svgo/blob/master/plugins/removeXMLNS.js) | removes the `xmlns` attribute (for inline SVG) | `disabled` |
  221. | [removeEditorsNSData](https://github.com/svg/svgo/blob/master/plugins/removeEditorsNSData.js) | remove editors namespaces, elements, and attributes | `enabled` |
  222. | [removeEmptyAttrs](https://github.com/svg/svgo/blob/master/plugins/removeEmptyAttrs.js) | remove empty attributes | `enabled` |
  223. | [removeHiddenElems](https://github.com/svg/svgo/blob/master/plugins/removeHiddenElems.js) | remove hidden elements | `enabled` |
  224. | [removeEmptyText](https://github.com/svg/svgo/blob/master/plugins/removeEmptyText.js) | remove empty Text elements | `enabled` |
  225. | [removeEmptyContainers](https://github.com/svg/svgo/blob/master/plugins/removeEmptyContainers.js) | remove empty Container elements | `enabled` |
  226. | [removeViewBox](https://github.com/svg/svgo/blob/master/plugins/removeViewBox.js) | remove `viewBox` attribute when possible | `enabled` |
  227. | [cleanupEnableBackground](https://github.com/svg/svgo/blob/master/plugins/cleanupEnableBackground.js) | remove or cleanup `enable-background` attribute when possible | `enabled` |
  228. | [minifyStyles](https://github.com/svg/svgo/blob/master/plugins/minifyStyles.js) | minify `<style>` elements content with [CSSO](https://github.com/css/csso) | `enabled` |
  229. | [convertStyleToAttrs](https://github.com/svg/svgo/blob/master/plugins/convertStyleToAttrs.js) | convert styles into attributes | `disabled` |
  230. | [convertColors](https://github.com/svg/svgo/blob/master/plugins/convertColors.js) | convert colors (from `rgb()` to `#rrggbb`, from `#rrggbb` to `#rgb`) | `enabled` |
  231. | [convertPathData](https://github.com/svg/svgo/blob/master/plugins/convertPathData.js) | convert Path data to relative or absolute (whichever is shorter), convert one segment to another, trim useless delimiters, smart rounding, and much more | `enabled` |
  232. | [convertTransform](https://github.com/svg/svgo/blob/master/plugins/convertTransform.js) | collapse multiple transforms into one, convert matrices to the short aliases, and much more | `enabled` |
  233. | [removeUnknownsAndDefaults](https://github.com/svg/svgo/blob/master/plugins/removeUnknownsAndDefaults.js) | remove unknown elements content and attributes, remove attributes with default values | `enabled` |
  234. | [removeNonInheritableGroupAttrs](https://github.com/svg/svgo/blob/master/plugins/removeNonInheritableGroupAttrs.js) | remove non-inheritable group's "presentation" attributes | `enabled` |
  235. | [removeUselessStrokeAndFill](https://github.com/svg/svgo/blob/master/plugins/removeUselessStrokeAndFill.js) | remove useless `stroke` and `fill` attributes | `enabled` |
  236. | [removeUnusedNS](https://github.com/svg/svgo/blob/master/plugins/removeUnusedNS.js) | remove unused namespaces declaration | `enabled` |
  237. | [prefixIds](https://github.com/svg/svgo/blob/master/plugins/prefixIds.js) | prefix IDs and classes with the SVG filename or an arbitrary string | `disabled` |
  238. | [cleanupIDs](https://github.com/svg/svgo/blob/master/plugins/cleanupIDs.js) | remove unused and minify used IDs | `enabled` |
  239. | [cleanupNumericValues](https://github.com/svg/svgo/blob/master/plugins/cleanupNumericValues.js) | round numeric values to the fixed precision, remove default `px` units | `enabled` |
  240. | [cleanupListOfValues](https://github.com/svg/svgo/blob/master/plugins/cleanupListOfValues.js) | round numeric values in attributes that take a list of numbers (like `viewBox` or `enable-background`) | `disabled` |
  241. | [moveElemsAttrsToGroup](https://github.com/svg/svgo/blob/master/plugins/moveElemsAttrsToGroup.js) | move elements' attributes to their enclosing group | `enabled` |
  242. | [moveGroupAttrsToElems](https://github.com/svg/svgo/blob/master/plugins/moveGroupAttrsToElems.js) | move some group attributes to the contained elements | `enabled` |
  243. | [collapseGroups](https://github.com/svg/svgo/blob/master/plugins/collapseGroups.js) | collapse useless groups | `enabled` |
  244. | [removeRasterImages](https://github.com/svg/svgo/blob/master/plugins/removeRasterImages.js) | remove raster images | `disabled` |
  245. | [mergePaths](https://github.com/svg/svgo/blob/master/plugins/mergePaths.js) | merge multiple Paths into one | `enabled` |
  246. | [convertShapeToPath](https://github.com/svg/svgo/blob/master/plugins/convertShapeToPath.js) | convert some basic shapes to `<path>` | `enabled` |
  247. | [convertEllipseToCircle](https://github.com/svg/svgo/blob/master/plugins/convertEllipseToCircle.js) | convert non-eccentric `<ellipse>` to `<circle>` | `enabled` |
  248. | [sortAttrs](https://github.com/svg/svgo/blob/master/plugins/sortAttrs.js) | sort element attributes for epic readability | `disabled` |
  249. | [sortDefsChildren](https://github.com/svg/svgo/blob/master/plugins/sortDefsChildren.js) | sort children of `<defs>` in order to improve compression | `enabled` |
  250. | [removeDimensions](https://github.com/svg/svgo/blob/master/plugins/removeDimensions.js) | remove `width`/`height` and add `viewBox` if it's missing (opposite to removeViewBox, disable it first) | `disabled` |
  251. | [removeAttrs](https://github.com/svg/svgo/blob/master/plugins/removeAttrs.js) | remove attributes by pattern | `disabled` |
  252. | [removeAttributesBySelector](https://github.com/svg/svgo/blob/master/plugins/removeAttributesBySelector.js) | removes attributes of elements that match a CSS selector | `disabled` |
  253. | [removeElementsByAttr](https://github.com/svg/svgo/blob/master/plugins/removeElementsByAttr.js) | remove arbitrary elements by `ID` or `className` | `disabled` |
  254. | [addClassesToSVGElement](https://github.com/svg/svgo/blob/master/plugins/addClassesToSVGElement.js) | add classnames to an outer `<svg>` element | `disabled` |
  255. | [addAttributesToSVGElement](https://github.com/svg/svgo/blob/master/plugins/addAttributesToSVGElement.js) | adds attributes to an outer `<svg>` element | `disabled` |
  256. | [removeOffCanvasPaths](https://github.com/svg/svgo/blob/master/plugins/removeOffCanvasPaths.js) | removes elements that are drawn outside of the viewbox | `disabled` |
  257. | [removeStyleElement](https://github.com/svg/svgo/blob/master/plugins/removeStyleElement.js) | remove `<style>` elements | `disabled` |
  258. | [removeScriptElement](https://github.com/svg/svgo/blob/master/plugins/removeScriptElement.js) | remove `<script>` elements | `disabled` |
  259. | [reusePaths](https://github.com/svg/svgo/blob/master/plugins/reusePaths.js) | Find duplicated <path> elements and replace them with <use> links | `disabled` |
  261. ## Other Ways to Use SVGO
  263. - as a web app – [SVGOMG](https://jakearchibald.github.io/svgomg/)
  264. - as a GitHub Action – [SVGO Action](https://github.com/marketplace/actions/svgo-action)
  265. - as a Grunt task – [grunt-svgmin](https://github.com/sindresorhus/grunt-svgmin)
  266. - as a Gulp task – [gulp-svgmin](https://github.com/ben-eb/gulp-svgmin)
  267. - as a Mimosa module – [mimosa-minify-svg](https://github.com/dbashford/mimosa-minify-svg)
  268. - as an OSX Folder Action – [svgo-osx-folder-action](https://github.com/svg/svgo-osx-folder-action)
  269. - as a webpack loader – [image-webpack-loader](https://github.com/tcoopman/image-webpack-loader)
  270. - as a Telegram Bot – [svgo_bot](https://github.com/maksugr/svgo_bot)
  271. - as a PostCSS plugin – [postcss-svgo](https://github.com/ben-eb/postcss-svgo)
  272. - as an Inkscape plugin – [inkscape-svgo](https://github.com/konsumer/inkscape-svgo)
  273. - as a Sketch plugin - [svgo-compressor](https://github.com/BohemianCoding/svgo-compressor)
  274. - as a macOS app - [Image Shrinker](https://image-shrinker.com)
  275. - as a Rollup plugin - [rollup-plugin-svgo](https://github.com/porsager/rollup-plugin-svgo)
  276. - as a VS Code plugin - [vscode-svgo](https://github.com/1000ch/vscode-svgo)
  277. - as a Atom plugin - [atom-svgo](https://github.com/1000ch/atom-svgo)
  278. - as a Sublime plugin - [Sublime-svgo](https://github.com/1000ch/Sublime-svgo)
  279. - as a Figma plugin - [Advanced SVG Export](https://www.figma.com/c/plugin/782713260363070260/Advanced-SVG-Export)
  280. - as a Linux app - [Oh My SVG](https://github.com/sonnyp/OhMySVG)
  281. - as a Browser extension - [SVG Gobbler](https://github.com/rossmoody/svg-gobbler)
  282. - as an API - [Vector Express](https://github.com/smidyo/vectorexpress-api#convertor-svgo)
  284. ## Donators
  286. | [<img src="https://sheetjs.com/sketch128.png" width="80">](https://sheetjs.com/) | [<img src="https://raw.githubusercontent.com/fontello/fontello/master/fontello-image.svg" width="80">](https://fontello.com/) |
  287. | :------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: |
  288. | [SheetJS LLC](https://sheetjs.com/) | [Fontello](https://fontello.com/) |
  290. ## License and Copyright
  292. This software is released under the terms of the [MIT license](https://github.com/svg/svgo/blob/master/LICENSE).
  294. Logo by [André Castillo](https://github.com/DerianAndre).