svgo: 一款强大的 SVG 优化工具
- 杂类
- 2024-05-08
- 257热度
- 0评论
svgo: 一款强大的 SVG 优化工具
svgo 是一个基于 Node.js 的命令行工具,用于对 SVG 图形进行压缩和优化。它通过移除不必要的数据和元信息、转换为更简洁的语法等方式,使 SVG 文件变得更小、加载更快,并且不会影响图形的质量。
项目网址: https://github.com/svg/svgo
使用场景
svgo 可以用于各种需要处理 SVG 图形的场合:
网站和应用中的图标、logo 和矢量图形。
数据可视化图表中的图形元素。
在打印或 PDF 文档中使用的矢量图形。
需要优化 SVG 图像大小的其他任何情况。
功能特性
svgo 支持以下功能特性:
移除不必要的元信息,如注释、隐藏元素等。
转换为更简洁的语法,例如将 <circle> 元素转换为 <path> 元素。
压缩文本内容,例如将文本转为路径或将文字属性合并。
删除不必要的填充和描边颜色。
合并重复的颜色和样式规则。
自动修复一些常见的 SVG 错误。
使用方法
安装
在您的计算机上安装 svgo,请运行以下命令:
npm install -g svgo
基本使用
要优化 SVG 单个文件,请在命令行中输入以下命令:
svgo input.svg -o output.svg
这将会把 input.svg
文件优化成 output.svg
。
使用 -f 命令使用递归处理文件目录
svgo -f path/to/directory_with_svgs -o path/to/output_directory
参数配置
为了进一步提高优化效果,您可以用配置文件来指定更多的优化选项。
例如:我们可以禁用默认预设里面的 removeViewBox
选项。
创建一个文件名为config.mjs
的配置文件
代码如下所示:
export default { plugins: [ { name: 'preset-default', params: { overrides: { // disable a default plugin removeViewBox: false, // customize the params of a default plugin inlineStyles: { onlyMatchedOnce: false, }, }, }, }, ], };
然后,在命令行中运行以下示例命令:
svgo --config path/to/config.mjs example-original.svg -o optimized-svg.svg
或者新建一个名为svgo.config.mjs
的配置文件,代码如上所示。把文件放在执行命令的同一目录下,执行命令时就会自动读取svgo.config.mjs 这个配置文件。
命令示例:
svgo input.svg -o output.svg
这样在执行命令时就不用输入路径和配置文件了,会自动读取当前目录里的 svgo.config.mjs
配置文件。
总之,svgo 是一款非常出色的 SVG 优化工具,可以帮助您轻松地优化 SVG 图形,使其达到最佳性能。赶快试试吧!