Svg

komantao 2020-02-13 2020-02-13 字数 370 阅读量 次

SVG（Scalable Vector Graphics，可缩放矢量图），一种基于XML语法的图像格式，本质上是文本文件（可使用文本编辑器查看其XML语法），体积较小（比JPEG和PNG格式的文件要小很多），且不管放大多少倍都不会失真。其他图像格式都是基于像素处理，SVG则是属于对图像的形状描述。

一、概述

关于在SVG中如何实现gif动画的问题？

由于svg不支持动画，我做了个替代方法如下

step 1:先把多帧gif分成单帧并透明化

<image id="gif0" width=... xlink:href="data:image/gif;base64,... /><image id="gif1" width=... xlink:href="data:image/gif;base64,... /><image id="gif2" width=...xlink:href="data:image/gif;base64,...  /><image id="gif3" width=... xlink:href="data:image/gif;base64,... />

step 2: 合成

<defs>
    <g id="animegif7" transform="translate(0,0) scale(1.0, 1.0)">
        <g>
            <use xlink:href="#gif0"/><animate attributeName="visibility" values="visible;hidden;hidden;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
        </g>
        <g>
            <use xlink:href="#gif1"/><animate attributeName="visibility" values="hidden;visible;hidden;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
        </g>
        <g>
            <use xlink:href="#gif2"/><animate attributeName="visibility" values="hidden;hidden;visible;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
        </g>
        <g>
            <use xlink:href="#gif3"/><animate attributeName="visibility" values="hidden;hidden;hidden;visible;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
        </g>
    </g>
</defs>

step 3: 使用动画

<use xlink:href="#animegif7"/>

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

一个Python的termtosvg包能实现终端录制成SVG图：

• termtosvg只支持Python 3.5以上的版本

参考资料

• []()
• []()
• []()

操作环境

• 操作系统：Win 10