命令行动图，命令行生成SVG动图

代码片段生成带高亮效果的漂亮图片我们可以使用carbon

但是如果想制作命令行操作的动图一般是录屏来转换成GIF图，其实还有另一种方式，我们可以使用asciinema + svg-term生成SVG图片

优点

• 操作过程简单

• 更小的图片体积

• 矢量

• 可以手动修改速度和文案

• 文字可以复制

• 跨平台

具体效果(CSDN不支持svg格式,点击查看效果)：
https://cdn.jsdelivr.net/gh/Iamxiaozhu/file-uploader-cli/test.svg

首先需要安装asciinema和svg-term

安装asciinema

svg-term安装比较简单

npm install -g svg-term-cli

第二步：安装完成后，先使用asciinema开始记录

# 默认会使用/bin/bash作为shell
asciinema rec

我运行了下面两行代码

# fuc是file-uploader-cli的简写
fuc -t github -c github.json
fuc test.svg

file-uploader-cli是一个命令行文件上传工具，可以通过命令行上传文件到github，阿里云对象存储，七牛云对象存储等。可以方便的用做图床上传工具，也可以在Typora中使用：当插入图片时会自动上传并替换为网络图片地址。

退出asciinema记录可以使用Ctrl + D,也可以直接键入exit。退出时我们选择键入ctrl+c来保存记录到本地。

asciinema生成的记录大概是这样

{"version": 2, "width": 101, "height": 24, "timestamp": 1614856599, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}}
[0.016438, "o", "\u001b[?1034hbash-3.2$ "]
[0.664553, "o", "fu"]
[0.664684, "o", "c -t github -c "]
[0.664785, "o", "github.json"]
[1.189336, "o", "\r\n"]
[1.272668, "o", "bash-3.2$ "]
[2.81004, "o", "fu"]
[2.810274, "o", "c test.svg"]
[3.2536, "o", "\r\n"]
[3.972172, "o", "https://cdn.jsdelivr.net/gh/Iamxiaozhu/file-uploader-cli/test.svg\r\n"]
[4.982049, "o", "bash-3.2$ "]
[7.350391, "o", "exit\r\n"]

可以直接修改时间参数来调整速度,

第三步：根据第二步生成的本地记录生产svg

svg-term --in /var/folders/0k/25hwq5v57j5dfg7xk9966k4c0000gp/T/tmpyckli_c2-ascii.cast 
	--out ./test.svg --height 9 --width 60 --window

--in 指定配置所在地址
--height 生成SVG图片高度
--width 生成SVG图片宽度
--out 输出svg图片
--out SVG图片是否带边框

查看示例