如何利用 Feflow 给终端录制一张 SVG 图片

之前在逛 create-react-app 仓库的时候，README.md 里有一张动图：

起初，我以为就是 GIF 图片，后来，导师指出这是一张 SVG 图，让我研究研究是如何生成的。

我也大吃一惊，越是平常的事物往往越是被忽略，我以前也见到过类似的动图，却从未深究过。好在很快就发现一个 Python 包 termtosvg 能实现终端录制成 SVG 图。

安装 termtosvg

termtosvg 只支持 Python 3.5 以上的版本。对于 macOS 来说，系统默认安装的是 Python 2.x 的版本，你需要自行安装 Python 3。

推荐使用 Homebrew 安装 pyenv，然后用 pyenv 管理 Python 的版本。相当于前端的 nvm

如果你是从官网上下载安装包安装的 Python 3，那么运行以下命令安装 termtosvg

pip3 install --user termtosvg
复制代码

如果你是用 pyenv 安装的 Python 3，那么切换到相应的版本，用 pip 而不是 pip3 来安装。

使用 termtosvg

理论上来说，现在已经能够运行 termtosvg 命令了，如果找不到该命令，那就是 Python 包的二进制文件所在的目录没有加入到 shell 的环境变量中。

你可运行 pip show -f termtosvg 或 pip3 show -f termtosvg ，该命令会打印出 termtosvg 包的详细信息，找到 Location 那一行，它会显示类似于 <python-root-path>/lib/python/site-packages 这样的地址，这是 termtosvg 的安装路径，而 termtosvg 命令则在 <python-root-path>/bin/termtosvg 的位置。你可以把 <python-root-path>/bin 目录加入到 shell 环境变量中：

export PATH=$PATH:<python-root-path>/bin
复制代码

当然，建议直接去修改 shell 的配置文件。

如果你想要一个带有 mac 窗口的终端录制，可以使用 -t 参数启动录制：

termtosvg -t window_frame
复制代码

现在，你在终端的任何操作都会被录制下来，结束录制按 Control + D 或者输入 exit 命令即可。

中文支持不友好

录制后，发现中文会挤在一起，看来作者根本没考虑中文的问题：

研究后发现，包裹中文的标签上写死了 textLength 属性，这对英文可能看起来更美观，但对中文却是致命性的打击。

Feflow 插件解决方案

每次录制结束后， termtosvg 都会提示 SVG 文件储存的位置，只要对它进行处理即可。为此，我写了一个Feflow 插件 feflow-plugin-svgtocn 来解决这个问题，只需要一行命令即可完成转换。

如果你还不了解 Feflow ，可以前往Feflow 官网 了解一下，它是一个工程效率工具，利用它开发插件十分方便，不过这只是它特性的冰山一角。

安装 feflow-plugin-svgtocn

feflow install feflow-plugin-svgtocn
复制代码

如果你还没安装 Feflow，那么得先安装一下：

npm i feflow-cli -g
复制代码

使用 feflow-plugin-svgtocn

使用 feflow-plugin-svgtocn 也非常简单，只需要运行 feflow svgtocn 命令，后面跟上要转换的文件路径即可，可以有多个文件路径：

feflow svgtocn <filePath> [<filePath2> ...]
复制代码

命令运行完后，你可以在当前目录下发现带有 convert- 前缀的 SVG 图片，它们对中文的支持就已经很好了。例如，上图经过转换就变成下面这样：

结语

目前为止，我们基本实现了开始的目标，但你可能发现 create-react-app 的主题很好看，那是因为他们用了自己的 template ，关于自定义 termtosvg 的 template 可以看 官方文档 ，这里就不再赘述。

《IVWEB 技术周刊》震撼上线了，关注公众号：IVWEB社区，每周定时推送优质文章。

• 周刊文章集合: weekly
• 团队开源项目: Feflow