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 终端的版本。
效果如下:
![my_session_mac_frame](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fqiniu.wzhecnu.cn%2FPicBed6%2Fpicgo%2Fmy_session_mac_frame.svg&pos_id=img-MbJevF7X-1714652483837%29)
基本示例
termtosvg my_session.svg
录制当前的终端会话,并将其保存为 my_session.svg
。
设置动画循环之间的暂停时间
termtosvg my_session_delayed.svg -D 2000
录制当前会话,并设置动画循环之间的暂停时间为 2 秒:
![my_session_delayed](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fqiniu.wzhecnu.cn%2FPicBed6%2Fpicgo%2Fmy_session_delayed.svg&pos_id=img-Do9kpTOa-1714652484079%29)
指定终端的大小
默认占满屏幕宽度,效果不好,可通过 -g
参数指定终端的大小。
termtosvg my_session_80x24.svg -g 80x24
以 80 列 24 行的大小录制并渲染终端会话。
![my_session_80x24](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fqiniu.wzhecnu.cn%2FPicBed6%2Fpicgo%2Fmy_session_80x24.svg&pos_id=img-caFPgVIE-1714652484199%29)
录制静态帧
termtosvg -s my_frames/
这将输出静态帧,而不是动画。录制结果将保存到 my_frames
目录中,每一帧都是一个独立的 SVG 文件。
使用模板
支持的模板列表:https://nbedos.github.io/termtosvg/pages/templates.html
termtosvg my_session_dracula.svg -t dracula
使用 dracula
模板录制并渲染当前会话。
![my_session_dracula](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fqiniu.wzhecnu.cn%2FPicBed6%2Fpicgo%2Fmy_session_dracula.svg&pos_id=img-nEs9Tl8S-1714652484327%29)
dracula
模板提供了一种暗色系的显示风格。
也可以尝试不同的模板,例如 solarized_dark
或 ubuntu
。
termtosvg my_session_solarized_dark.svg -t solarized_dark
![my_session_solarized_dark](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fqiniu.wzhecnu.cn%2FPicBed6%2Fpicgo%2Fmy_session_solarized_dark.svg&pos_id=img-gFuk8M4F-1714652484411%29)
模板修改指南
在 termtosvg 中,模板是SVG文件,用于嵌入动画。使用模板可以实现以下功能:
- 自定义终端颜色主题和字体:用户可以通过模板中的
style
元素定义终端颜色和字体样式,使得动画更符合个人审美或项目需求。 - 添加终端用户界面或窗口框架:通过 SVG 模板,可以为动画添加类似实际终端窗口的视觉框架,增加真实感和美观性。
- 交互式动画:例如播放/暂停按钮,使用户能够控制动画的播放过程,提高用户体验。
模板结构
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进度条
嵌入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
![my_session_with_frame](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fqiniu.wzhecnu.cn%2FPicBed6%2Fpicgo%2Fmy_session_with_frame.svg&pos_id=img-gcEFAzNV-1714745710978%29)
# 下载模板
wget -c https://qiniu.wzhecnu.cn/PicBed6/picgo/mac_frame.svg
# 使用模板
termtosvg my_session_mac.svg -t ./mac_frame.svg -g 80x24
显示效果:
![my_session_mac_frame](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fqiniu.wzhecnu.cn%2FPicBed6%2Fpicgo%2Fmy_session_mac_frame.svg&pos_id=img-DxD9aCsy-1714745711231%29)
修改内容
主要修改了底部对图标样式的定义,将原始的 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 格式,便于在更多平台上展示。