Termtosvg 录制终端并导出 SVG 动画

CSDN 不支持显示 SVG，可访问这个，转 GIF 后本页面会进行更新。
博客地址：https://www.wzhecnu.cn/2024/05/02/server/screenshot-svg/

唠唠闲话

在日常的开发工作中，有时我们需要记录并展示终端操作的过程，无论是为了演示、教学还是文档编制。尽管有多种工具可以完成这项工作，termtosvg 是一个不仅能录制终端会话，还能以动态或静态的SVG文件格式展示的工具，使得分享和展示变得格外方便和直观。

TermToSVG

termtosvg 是一个基于 Python 命令行工具，可以捕捉终端会话，并将其转换成高质量的 SVG 动画。由于其输出为 SVG 格式，因此录制的会话可以轻松地嵌入网页或任何支持 SVG 的媒体中，保持清晰的显示质量，不会失真，且体积较小。

GIF

通过 Asciinema 录制终端对话，导出 GIF：

安装：

sudo apt install asciinema -y
npm install -g asciicast2gif 
npm install -g gifsicle

使用：

# 录制
asciinema rec demo.cast
# 播放
asciinema play test.cast 
# 导出
asciicast2gif demo.cast demo.gif

示例

我们以 askchat 为例，演示常用的 termtosvg 参数用法，并对已有模板进行魔改，制作 Mac 终端的版本。

效果如下：

基本示例

termtosvg my_session.svg

录制当前的终端会话，并将其保存为 my_session.svg。

设置动画循环之间的暂停时间

termtosvg my_session_delayed.svg -D 2000

录制当前会话，并设置动画循环之间的暂停时间为 2 秒：

指定终端的大小

默认占满屏幕宽度，效果不好，可通过 -g 参数指定终端的大小。

termtosvg my_session_80x24.svg -g 80x24

以 80 列 24 行的大小录制并渲染终端会话。

录制静态帧

termtosvg -s my_frames/

这将输出静态帧，而不是动画。录制结果将保存到 my_frames 目录中，每一帧都是一个独立的 SVG 文件。

使用模板

支持的模板列表：https://nbedos.github.io/termtosvg/pages/templates.html

termtosvg my_session_dracula.svg -t dracula

使用 dracula 模板录制并渲染当前会话。

dracula 模板提供了一种暗色系的显示风格。

也可以尝试不同的模板，例如 solarized_dark 或 ubuntu。

termtosvg my_session_solarized_dark.svg -t solarized_dark

模板修改指南

在 termtosvg 中，模板是SVG文件，用于嵌入动画。使用模板可以实现以下功能：

1. 自定义终端颜色主题和字体：用户可以通过模板中的 style 元素定义终端颜色和字体样式，使得动画更符合个人审美或项目需求。
2. 添加终端用户界面或窗口框架：通过 SVG 模板，可以为动画添加类似实际终端窗口的视觉框架，增加真实感和美观性。
3. 交互式动画：例如播放/暂停按钮，使用户能够控制动画的播放过程，提高用户体验。

模板结构

TermToSVG 模板结构：

<?xml version="1.0" encoding="utf-8"?>
<svg id="terminal" baseProfile="full" viewBox="0 0 656 325" width="656" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <termtosvg:template_settings xmlns:termtosvg="https://github.com/nbedos/termtosvg">
            <termtosvg:screen_geometry columns="82" rows="19"/>
            <termtosvg:animation type="css"/>
        </termtosvg:template_settings>
        <style type="text/css" id="generated-style">
            <!-- [snip!] -->
        </style>
        <style type="text/css" id="user-style">
            <!-- [snip!] -->
        </style>
    </defs>
    <svg id="screen" width="656" viewBox="0 0 656 323" preserveAspectRatio="xMidYMin meet">
        <!-- [snip!] -->
    </svg>
    <script type="text/javascript" id="generated-js">
        <!-- [snip!] -->
    </script>
</svg>

模板结构和各部分的作用：

• svg 元素（ID “terminal”）：这是 SVG 文件的最外层容器
• defs 元素：这是一个定义容器，用来存储 SVG 中使用的定义，如样式和脚本等。包括：
  • termtosvg:template_settings 元素：termtosvg 特有的设置，用于定义终端的尺寸（列和行数）和动画的渲染方法（"css"代表使用CSS动画，"waapi"代表使用Web Animations API）。这些设置告诉 termtosvg 如何渲染终端动画。
  • style 元素（ID “generated-style”）：这里的样式将被 termtosvg 在生成动画时自动覆盖，通常用于动画效果的实现。
  • 另一个style 元素（ID “user-style”）：这里的样式由模板创建者定义，通常包含终端的颜色主题，不会被termtosvg覆盖，允许用户自定义终端的视觉样式。
• 内部svg 元素（ID “screen”）：这个元素是动画实际展示的区域，保持动画内容的适当比例和定位。
• script 元素（ID “generated-js”）：这里的脚本将在使用"waapi"渲染方法时由 termtosvg 覆盖，通常包含动画的控制逻辑，如播放和暂停功能。

模板定制

模板定制的基本思想是，termtosvg会保留它未修改的模板元素。因此，您可以：

• 通过修改带有id "user-style"的style元素的内容来自定义动画样式：可以自定义动画的颜色主题、字体等样式，以符合个人或项目的视觉需求。
• 添加新的script元素以在动画中嵌入JavaScript代码：可以通过添加JavaScript代码增加动画的交互性或实现特定功能。
• 添加其他SVG元素，只要它们不是带有id "screen"的svg元素的子元素：可以自由地添加额外的视觉元素或装饰，只要它们不干扰动画的主要显示区域。

希望这些信息以及默认模板的代码足以帮助您开始进行模板定制。如果需要帮助，随时提交问题。

自定义颜色主题或字体

终端颜色主题在带有 id “user-style” 的 style 元素中指定，并且必须定义以下所有类：foreground, background, color0, color1, …, color15。字体相关属性也可以与颜色主题一起指定。下面是一个示例。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="terminal" baseProfile="full" viewBox="0 0 656 325" width="656" version="1.1">
    <defs>
         /* ... 省略 ... */
        <style type="text/css" id="generated-style">
            /* ... 省略 ... */
        </style>
        <style type="text/css" id="user-style">
            .foreground {fill: #c5c5c5;}
            .background {fill: #1c1c1c;}
            .color0 {fill: #1c1c1c;}
            .color1 {fill: #ff005b;}
            /* ... 省略 ... */
            .color15 {fill: #e5e5e5;}

            font-family: Monaco, monospace;
        </style>
    </defs>
    <svg id="screen" width="656" viewBox="0 0 656 323" preserveAspectRatio="xMidYMin meet">
    </svg>
</svg>

自定义终端用户界面

<?xml version="1.0" encoding="utf-8"?>
<svg id="terminal" baseProfile="full" viewBox="0 0 656 325" width="656" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    /* ... 省略 ... */
    </defs>
    <rect id="terminalui" class="background" width="100%" height="100%" ry="4.5826941"/>
    <circle cx="24" cy="23" r="7" class="color1"/>
    <circle cx="44" cy="23" r="7" class="color3"/>
    <circle cx="64" cy="23" r="7" class="color2"/>
    <svg id="screen" width="656" viewBox="0 0 656 323" preserveAspectRatio="xMidYMin meet">
        <!-- [snip!] -->
    </svg>
    <script type="text/javascript" id="generated-js">
        <!-- [snip!] -->
    </script>
</svg>

完整示例：window_frame.svg

CSS进度条

完整示例：colors_progress_bar.svg

嵌入JavaScript

在新的script元素中添加代码。

完整示例：window_frame_js

将动画限制为单次循环

对于使用CSS的模板，简单地添加一个自定义样式元素，指定循环次数，如下所示：

<style type="text/css" id="user-style">
    #screen_view {
        animation-iteration-count:1;
    }
</style>

完整示例在此：gjm8_single_loop

自定义模板

我们基于 window_frame.svg 进行魔改。原始模板的图标配色看着不适应，且边框棱角明显，我们将其修改为 Mac 风格，修改后的模板下载地址：mac_frame。

效果对比

原始效果：

termtosvg my_session_with_frame.svg -t window_frame

# 下载模板
wget -c https://qiniu.wzhecnu.cn/PicBed6/picgo/mac_frame.svg
# 使用模板
termtosvg my_session_mac.svg -t ./mac_frame.svg -g 80x24

显示效果：

修改内容

主要修改了底部对图标样式的定义，将原始的 class 属性改为 style 属性，并修改了 rx 和 ry 属性，使其更加圆润。

原始配置：

<rect id="terminalui" class="background" width="100%" height="100%" ry="4.5826941"/>
<circle cx="24" cy="23" r="7" class="color1"/>
<circle cx="44" cy="23" r="7" class="color3"/>
<circle cx="64" cy="23" r="7" class="color2"/>

修改后：

<rect id="terminalui" class="background" width="100%" height="100%" rx="10" ry="10"/>
<circle cx="24" cy="23" r="7" style="fill: #ff5f56"/>
<circle cx="44" cy="23" r="7" style="fill: #ffbd2e"/>
<circle cx="64" cy="23" r="7" style="fill: #27c93f"/>

设置快捷方式

通过 alias 配置默认启动参数，举个例子：

# 先保存模板
mkdir -p ~/.config/termtosvg
wget https://qiniu.wzhecnu.cn/PicBed6/picgo/mac_frame.svg -P ~/.config/termtosvg/
# 设置快捷命令
alias termrec='termtosvg -t $HOME/.config/termtosvg/mac_frame.svg -g 80x24'

需要时运行 termrec my_session_mac.svg 即可。

SVG 转 GIF

有时候，我们可能希望将 SVG 动画转换为更通用的 GIF 格式，以便在更多平台上展示（比如 CSDN）。这可以通过借助图像处理工具 ImageMagick 来实现。以下是详细步骤：

安装 ImageMagick

(实测存在问题，TODO)

ImageMagick 是一款强大的图像处理工具，支持多种格式的转换，包括 SVG 到 GIF。

• 在 Ubuntu 上，通过以下命令安装：

  sudo apt-get install imagemagick
  

• 在 Mac上，使用 Homebrew 进行安装：

  brew install imagemagick
  

使用 ImageMagick 转换 SVG 为 GIF

ImageMagick 安装完成后，可以使用 convert 命令将 SVG 文件转换为 GIF。

convert -delay 20 -loop 0 my_animation.svg my_animation.gif

其中 -delay 20 控制每帧之间的时间间隔（单位是1/100秒），-loop 0 指定 GIF 动画循环播放的次数（0表示无限循环）。

注意事项

• 转换质量：SVG动画的转换质量可能受多种因素影响，包括SVG的复杂度、转换参数等。可能需要调整 convert 命令的参数来优化输出的 GIF。

• 性能问题：如果SVG动画过于复杂，转换为GIF时可能会出现性能问题。可以考虑简化 SVG 内容或优化转换参数以提升性能。

---

以上，这些方法可以帮助你轻松将终端内容录制为 SVG 动画，或者更通用的 GIF 格式，便于在更多平台上展示。