SVGO--使用/实例

SVGO--使用/实例
原文网址：SVGO--使用/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍svg图片的压缩工具：svgo。

我们很多网上下载或者Sketch导出的svg会有很多冗余无用的信息，大大的增加了svg的尺寸，可以使用svgo对它进行优化。无用的信息有：编辑器源信息，注释等。

官网网址

github地址：https://github.com/svg/svgo

在线压缩

在几秒钟内免费压缩你的SVG文件！ //可压缩多文件，导出文件名不变

SVG压缩器-压缩SVG在线 //可压缩多文件，导出文件名加-min

SVG压缩 – 在线压缩SVG图像 //可压缩多文件，导出文件名加-min

svgo概述

svgo是SVG Optimizer的简写。这是一个基于Nodejs的SVG文件优化工具。

SVGO基于插件模式构建，基本上所有的优化都是一个分离的插件。

目前有：
- [ cleanupAttrs ] 清除换行，结束符以及重复空格
- [ removeDoctype ] 删除文档声明
- [ removeXMLProcInst ] 删除XML处理指令
- [ removeComments ] 删除注释
- [ removeMetadata ] 删除源信息
- [ removeTitle ] 删除标题(默认禁用)</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeDesc.js" title="removeDesc">removeDesc</a> ] 删除<desc>描述 (默认只有desc元素无意义的时候)</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeUselessDefs.js" title="removeUselessDefs">removeUselessDefs</a> ] 删除<defs>元素如果没有id</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeEditorsNSData.js" title="removeEditorsNSData">removeEditorsNSData</a> ] 删除编辑器的命名空间，元素和属性</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeEmptyAttrs.js" title="removeEmptyAttrs">removeEmptyAttrs</a> ] 删除空属性</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeHiddenElems.js" title="removeHiddenElems">removeHiddenElems</a> ] 删除隐藏元素</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeEmptyText.js" title="removeEmptyText">removeEmptyText</a> ] 删除隐藏文本元素</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeEmptyContainers.js" title="removeEmptyContainers">removeEmptyContainers</a> ] 删除空的容器元素</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeViewBox.js" title="removeViewBox">removeViewBox</a> ]如果可以，删除viewBox属性(默认进行)</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/cleanupEnableBackground.js" title="cleanUpEnableBackground">cleanUpEnableBackground</a> ] 如果可以，删除enable-background属性</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/minifyStyles.js" title="minifyStyles">minifyStyles</a> ] 使用<a href="https://github.com/css/csso" title="CSSO">CSSO</a>最小化元素的<style>内容</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/convertStyleToAttrs.js" title="convertStyleToAttrs">convertStyleToAttrs</a> ] 转换样式为属性值</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/convertColors.js" title="convertColors">convertColors</a> ] 转换颜色(从rgb()到#rrggbb, 从 #rrggbb到#rgb)</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/convertPathData.js" title="convertPathData">convertPathData</a> ] 将路径数据转换为的相对路径和绝对路径中简短的那一个，过滤无用的分隔符，智能四舍五入以及其他很多处理</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/convertTransform.js" title="convertTransform">convertTransform</a> ] 合并多个transforms为一个, 转换矩阵为短命名，以及其他很多处理</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeUnknownsAndDefaults.js" title="removeUnknownsAndDefaults">removeUnknownsAndDefaults</a> ] 删除未知的元素内容和属性，删除值为默认值的属性/li></li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeNonInheritableGroupAttrs.js" title="removeNonInheritableGroupAttrs">removeNonInheritableGroupAttrs</a> ] 删除不可基础组的”presentation”属性</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeUselessStrokeAndFill.js" title="removeUselessStrokeAndFill">removeUselessStrokeAndFill</a> ] 删除无用的stroke和fill属性</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeUnusedNS.js" title="removeUnusedNS">removeUnusedNS</a> ] 删除没有使用的命名空间声明</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/cleanupIDs.js" title="cleanupIDs">cleanupIDs</a> ] 删除没有使用或者压缩使用的IDs</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/cleanupNumericValues.js" title="cleanupNumericValues">cleanupNumericValues</a> ] 数值四舍五入提高精度, 删除默认的’px’单位</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/moveElemsAttrsToGroup.js" title="moveElemsAttrsToGroup">moveElemsAttrsToGroup</a> ] 移动元素属性们到外面包裹的组元素上</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/moveGroupAttrsToElems.js" title="moveGroupAttrsToElems">moveGroupAttrsToElems</a> ] 移动一些组属性到内容元素上</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/collapseGroups.js" title="collapseGroups">collapseGroups</a> ] 合并无用的组</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeRasterImages.js" title="removeRasterImages">removeRasterImages</a> ] 删除点阵图像(默认禁用)</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/mergePaths.js" title="mergePaths">mergePaths</a> ] 合并多个路径为一个</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/convertShapeToPath.js" title="convertShapeToPath">convertShapeToPath</a> ] 转换一些基本图形为路径</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/sortAttrs.js" title="sortAttrs">sortAttrs</a> ] 元素属性排序使其像诗歌一样易读(默认禁用)</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/transformsWithOnePath.js" title="transformsWithOnePath">transformsWithOnePath</a> ] 通过里面一条路径实现transforms, 真实宽度剪裁, 垂直居中对齐以及SVG缩放拉伸(默认禁用)</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeDimensions.js" title="removeDimensions">removeDimensions</a> ] 如果viewBox就是当下尺寸限定，删除width/height属性(默认禁用)</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeAttrs.js" title="removeAttrs">removeAttrs</a> ] 通过正则删除属性 (默认禁用)</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/addClassesToSVGElement.js" title="addClassesToSVGElement">addClassesToSVGElement</a> ] 添加类名给外面的<svg>元素 (默认禁用)</li><li>[ <a href="https://github.com/svg/svgo/blob/master/plugins/removeStyleElement.js" title="removeStyleElement">removeStyleElement</a> ] 删除元素的<style> (默认禁用)</li></ul> <h2><a name="t2"></a>使用</h2> <h3><a name="t3"></a>安装</h3> <pre data-index="0" class="set-code-show" name="code"><code class="hljs language-coffeescript"><span class="hljs-built_in">npm</span> install -g svgo</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3><a name="t4"></a>选项</h3> <p>svgo [OPTIONS] [ARGS]</p> <pre data-index="1" class="set-code-hide" name="code"><code class="hljs language-cobol"><ol class="hljs-ln" style="width:707px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">Options</span>:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> -h, --help : Help 帮助</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> -v, --version : Version版本</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> -i <span class="hljs-keyword">INPUT</span>, --<span class="hljs-keyword">input</span><span class="hljs-operator">=</span><span class="hljs-keyword">INPUT</span> : 输入的文件, <span class="hljs-string">"-"</span> 为标准输入</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> -s <span class="hljs-keyword">STRING</span>, --<span class="hljs-keyword">string</span><span class="hljs-operator">=</span><span class="hljs-keyword">STRING</span> : 输入SVG数据字符串</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> -f FOLDER, --folder<span class="hljs-operator">=</span>FOLDER : 输入的文件夹，会优化与重写所有的<span class="hljs-operator">*</span>.svg文件</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> -o <span class="hljs-keyword">OUTPUT</span>, --<span class="hljs-keyword">output</span><span class="hljs-operator">=</span><span class="hljs-keyword">OUTPUT</span> : 输入的文件或文件夹 (默认同输入), <span class="hljs-string">"-"</span> 标准输出</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> -p PRECISION, --precision<span class="hljs-operator">=</span>PRECISION : 设置数字的小数部分，重写插件参数</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> --config<span class="hljs-operator">=</span>CONFIG : 配置文件扩展或替换默认设置</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> --disable<span class="hljs-operator">=</span>DISABLE : 根据名字禁用插件</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> --enable<span class="hljs-operator">=</span>ENABLE : 根据名字开启插件</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> --datauri<span class="hljs-operator">=</span>DATAURI : 输入文件以<span class="hljs-keyword">Data</span> URI字符串形式(base<span class="hljs-number">64</span>, URI encoded <span class="hljs-keyword">or</span> unencoded)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> -q, --quiet : 仅输出错误信息，不包括正常状态消息</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> --pretty : 让SVG漂亮的打印</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> --show-plugins : 显示可用和存在的插件</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">Arguments:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">INPUT</span> : 别名 --<span class="hljs-keyword">input</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">OUTPUT</span> : 别名 --<span class="hljs-keyword">output</span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3><a name="t5"></a>示例</h3> <p><strong>文件夹举例</strong></p> <pre data-index="2" class="set-code-show" name="code"><code class="hljs language-cobol">svgo -f ..<span class="hljs-operator">/</span>path<span class="hljs-operator">/</span><span class="hljs-keyword">to</span><span class="hljs-operator">/</span>folder<span class="hljs-operator">/</span><span class="hljs-keyword">with</span><span class="hljs-operator">/</span>svg<span class="hljs-operator">/</span>files</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>或者：</p> <pre data-index="3" class="set-code-show" name="code"><code class="hljs language-cobol">svgo -f ..<span class="hljs-operator">/</span>path<span class="hljs-operator">/</span><span class="hljs-keyword">to</span><span class="hljs-operator">/</span>folder<span class="hljs-operator">/</span><span class="hljs-keyword">with</span><span class="hljs-operator">/</span>svg<span class="hljs-operator">/</span>files -o ..<span class="hljs-operator">/</span>path<span class="hljs-operator">/</span><span class="hljs-keyword">to</span><span class="hljs-operator">/</span>folder<span class="hljs-operator">/</span><span class="hljs-keyword">with</span><span class="hljs-operator">/</span>svg<span class="hljs-operator">/</span><span class="hljs-keyword">output</span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><strong>单个文件使用举例</strong></p> <pre data-index="4" class="set-code-show" name="code"><code class="hljs language-cobol">svgo <span class="hljs-keyword">test</span>.svg</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>或者:</p> <pre data-index="5" class="set-code-show" name="code"><code class="hljs language-cobol">svgo <span class="hljs-keyword">test</span>.svg <span class="hljs-keyword">test</span>.min.svg</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><strong>使用STDIN / STDOUT(标准输入输出)</strong></p> <pre data-index="6" class="set-code-show" name="code"><code class="hljs language-cobol">cat <span class="hljs-keyword">test</span>.svg | svgo -i<span class="hljs-operator"> - </span>-o<span class="hljs-operator"> - </span><span class="hljs-operator">></span> <span class="hljs-keyword">test</span>.min.svg</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><strong>使用字符串</strong></p> <pre data-index="7" class="set-code-show" name="code"><code class="hljs language-xml">svgo -s '<span class="hljs-tag"><<span class="hljs-name">svg</span> <span class="hljs-attr">version</span>=<span class="hljs-string">"1.1"</span>></span>test<span class="hljs-tag"></<span class="hljs-name">svg</span>></span>' -o test.min.svg</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><strong>Data URI base64</strong></p> <pre data-index="8" class="set-code-show" name="code"><code class="hljs language-haskell"><span class="hljs-title">svgo</span> -s '<span class="hljs-class"><span class="hljs-keyword">data</span>:image/svg+xml;base64,…' -o test.min.svg</span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><strong>SVGZ使用</strong></p> <p>从.svgz到.svg:</p> <pre data-index="9" class="set-code-show" name="code"><code class="hljs language-cobol">gunzip -c <span class="hljs-keyword">test</span>.svgz | svgo -i<span class="hljs-operator"> - </span>-o <span class="hljs-keyword">test</span>.min.svg</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>从.svg到.svgz:</p> <pre data-index="10" class="set-code-show" name="code"><code class="hljs language-cobol">svgo <span class="hljs-keyword">test</span>.svg -o<span class="hljs-operator"> - </span>| gzip -cfq<span class="hljs-number">9</span> <span class="hljs-operator">></span> <span class="hljs-keyword">test</span>.svgz</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2><a name="t6"></a>vue-element-admin对svgo的使用</h2> <p> 我是在看vue-element-admin时看到的svgo，于是写了这篇博客。本处介绍vue-element-admin对svgo的使用。</p> <p><strong>1. 在开发依赖中引入svgo</strong></p> <p class="img-center"><img alt="" height="850" src="https://1000bd.com/contentImg/2023/10/28/132114137.png" ></p> <p><strong>2. svgo配置文件以及svg图片文件夹</strong></p> <p class="img-center"><img alt="" height="516" src="https://1000bd.com/contentImg/2023/10/28/132114106.png" ></p> <p>svg文件夹：存放svg图标文件</p> <p>svgo.yml：配置文件。内容为：</p> <pre data-index="11" class="set-code-hide" name="code"><code class="hljs language-cobol"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"># <span class="hljs-keyword">replace</span> <span class="hljs-keyword">default</span> config</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"># multipass: <span class="hljs-keyword">true</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"># full: <span class="hljs-keyword">true</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">plugins:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> #<span class="hljs-operator"> - </span>name</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> #</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> # <span class="hljs-keyword">or</span>:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> #<span class="hljs-operator"> - </span>name: <span class="hljs-keyword">false</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> #<span class="hljs-operator"> - </span>name: <span class="hljs-keyword">true</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> #</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> # <span class="hljs-keyword">or</span>:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> #<span class="hljs-operator"> - </span>name:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> # param<span class="hljs-number">1</span>: <span class="hljs-number">1</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> # param<span class="hljs-number">2</span>: <span class="hljs-number">2</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">- removeAttrs:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> attrs:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"> - </span><span class="hljs-string">'fill'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"> - </span><span class="hljs-string">'fill-rule'</span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><strong>3. 将svgo添加到脚本</strong></p> <p class="img-center"><img alt="" height="578" src="https://1000bd.com/contentImg/2023/10/28/132114155.png" ></p> <p>脚本为：</p> <pre data-index="12" class="set-code-show" name="code"><code class="hljs language-cobol">svgo -f src<span class="hljs-operator">/</span>icons<span class="hljs-operator">/</span>svg --config<span class="hljs-operator">=</span>src<span class="hljs-operator">/</span>icons<span class="hljs-operator">/</span>svgo.yml</code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2><a name="t7"></a><strong>其他网址</strong></h2> <p><a href="https://panjiachen.github.io/vue-element-admin-site/zh/feature/script/svgo.html" title="Svgo | vue-element-admin">Svgo | vue-element-admin</a></p> <p><a href="https://juejin.cn/post/6844903517564436493#heading-11" title="手摸手，带你优雅的使用 icon - 掘金">手摸手，带你优雅的使用 icon - 掘金</a></p> <p><a href="https://www.zhangxinxu.com/wordpress/2016/02/svg-compress-tool-svgo-experience/" title="SVG精简压缩工具svgo简介和初体验 « 张鑫旭-鑫空间-鑫生活">SVG精简压缩工具svgo简介和初体验 « 张鑫旭-鑫空间-鑫生活</a></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/810929">Docker 容器 jvm 内存参数调整优化</a> <br /> <a href="/Article/Index/1418638">c语言中各类指针的总结</a> <br /> <a href="/Article/Index/1505232">06 OpenCV增加图像的对比度</a> <br /> <a href="/Article/Index/1488142">安卓价值1-如何在电脑上运行ADB</a> <br /> <a href="/Article/Index/1316603">如何管理销售团队？</a> <br /> <a href="/Article/Index/1085598">EBI、DDD及其演变架构史</a> <br /> <a href="/Article/Index/1141797">免杀Veil-catapult</a> <br /> <a href="/Article/Index/1151251">【蓝桥杯选拔赛真题29】python堆砖块青少年组蓝桥杯python 选拔赛STEMA比赛真题解析</a> <br /> <a href="/Article/Index/724660">31岁才转行程序员，目前34了，我来说说我的经历和一些感受吧...</a> <br /> <a href="/Article/Index/1420780">【java学习—九】面向对象内容总结（8）</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/feiying0canglang/article/details/126411662 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

简介

svgo概述