npm 包 SVGi 使用教程-JavaScript中文网-JavaScript教程资源分享门户

SVGi 是一个可以优化 SVG 代码的工具，它通过清理无用的元素和属性以及精简代码，帮助用户在保证显示效果的基础上减少文件大小。在前端开发过程中，SVG 经常被用来创建矢量图标、形状等元素，而 SVGi 则可以帮助我们更高效地使用 SVG。

安装 SVGi

要使用 SVGi，需要首先安装它。可以通过 npm 安装，执行以下命令：

npm install -g svgi

使用 SVGi

安装好 SVGi 之后，我们就可以使用它来优化 SVG 代码了。首先要做的是通过命令行进入要优化的 SVG 所在的目录，然后执行以下命令：

svgi -f inputFile.svg -o outputFile.svg

其中，-f 参数表示要优化的 SVG 文件，-o 参数表示输出文件。如果不指定 -o 参数，则默认输出文件名为 inputFile.optimized.svg。

SVGi 的属性和元素清理

SVGi 可以通过清理属性和元素来优化 SVG 代码。下面是 SVGi 能够处理的属性和元素列表：

属性：'width', 'height', 'fill', 'stroke', 'opacity', 'viewBox'
元素：'animate', 'animateColor', 'animateMotion', 'animateTransform', 'circle', 'ellipse', 'line', 'polygon', 'polyline', 'rect', 'text'

SVGi 会将这些属性和元素中不需要（比如默认值相同的属性）的内容删除。

SVGi 的精简功能

通过精简功能，SVGi 可以删除不必要的元素和属性，从而减少 SVG 文件的大小。以下是 SVGi 可以精简的列表：

不必要的 id 属性
不需要出现在 SVG 容器中的 title 和 desc 元素
不需要的 style 元素
xml:space 属性如果被设置为 preserve
px 单位

以上是 SVGi 可以进行精简的列表，不过如果你使用了其他的不常见的属性和元素，SVGi 可能无法处理。需要注意的是，SVGi 的精简功能会影响 SVG 文件的可读性，因此在使用的时候需要斟酌。

示例代码

下面是一个 SVGi 优化前后的示例代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#F00" stroke="#000" strokeWidth="2"/>
  <rect x="20" y="20" width="60" height="60" fill="#0F0" stroke="#000" strokeWidth="2"/>
</svg>

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"/>
  <rect x="20" y="20" width="60" height="60"/>
</svg>

在上面的示例中，SVGi 删除了不需要的 fill 和 stroke 属性，并将 strokeWidth 属性的默认值从 1 改为了 0，从而减少了代码量。如果你在实际使用 SVGi 的过程中遇到问题，可以查看 SVGi 官方文档以获取更多帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055b8381e8991b448d9159