SMIL——自己动才是真的动
SMIL 是 Firefox 引入的一个动画标准，后来 Chrome 一度想放弃对 SMIL 的支持，但是碍于大量的开发者反馈，到目前 SMIL 还坚挺得活着。另外这种格式在不支持 CSS 或 JS 的场景下，例如 markdown 中也是可用的，相比于 GIF 它是矢量的，且体积更小。
SMIL 的语法及其简单，只需要在 SVG 元素中添加
<set> 、 <animate> 、<animateTransfrom> 或 <animateMotion> 中的一个元素，就可以实现：- 改变元素的数值属性（ x, y, … ）
- 动画属性变换（平移或旋转）
- 动画颜色属性
- 沿着运动路径运动
<set>
属性设置元素，无法实现动画效果，一般用来延迟效果，也就是在一段时间后修改某个属性的值。
<animate>
基础动画元素，用来实现单属性的动画过渡效果。
<animateTransform>
变换动画元素，用来实现变换动画效果，其能力与 CSS3 中的 transform 相似。
<animateMotion>
路径动画元素，可以让 SVG 元素沿着特定的 Path 路径运动。
SMIL 具体属性
待完善
CSS控制——只需要“亿”个class
CSS 控制 SVG 动画，其实就是借助 CSS3 的动画属性，需要给元素添加上类名，然后再对类名进行动画控制。
JS控制——来去自如才是真魔法
由于 SMIL 更偏向于循环动画的感觉，并不能控制动画的暂停和播放进程。JS控制的本质是动态地修改 SVG 元素的属性。对于 React 项目来说，使用 farmer-motion 来控制SVG 动画很方便，例如官方示例：
Lottie —— 为前端加上 AE 的魔法
待完善
闲聊
最近有一点想学习设计，所有有一些矢量图绘制的需求，因为很反感 Adobe 的一装装一家的行为，所以买了 Affinity Designer 的 license，其实很早之前就用过他们家的 Photo 和 Designer 来替代 Adobe，对于我的使用场景来说是完全可行的。本篇文章的插图 SVG 的静态版本就是用 Designer 来进行绘制的。