前段时间发现子比官网的这个Logo是动态的，“B”的上下两个形状分别展示，然后“ZIBLL”带有笔画地呈现出来。接下来教各位朋友如何复刻一个这样的Logo。我把这个Logo扒下来发现是SVG的，SVG相较于GIF有两个好处，一是远比GIF小，子比官网这个Logo不到10KB，而相同清晰度与流畅度的GIF绝对无法做到这么小；二是无损，SVG本身就是矢量图，无论放多大都不会出现一点锯齿。不过想要做这个要花费不少心思（或者说其实很简单但是我没找到更简单的方法），没耐心的朋友不用试了（不如PPT录屏转GIF），或者v我50代做(前面这段请查看评论区置顶)。

成品演示（子比官网无法上传svg）：

你也可以用电脑进入子比官网，切换浅色和深色模式来查看。

需要自备一张SVG矢量Logo和Ai（adobe画矢量图那个），以及一个代码编辑器VS Code（其他的也行，推荐在里面装个SVG插件）

关于位置偏移问题：

二次编辑新增：CSS修改：

关于SVG的压缩（可选，没太大必要）：

教程很长，大佬们请轻喷~