SVG 有很多好处,诸如良好的缩放支持,不用担心屏幕像素密度;较小的文件大小(当然这取决于绘制图像的路径复杂度);可以使用 CSS 控制 SVG(这点很重要,我们将在此篇文章中利用它)等等。

我们知道 SVG 应用于 icon 是一个典型的使用场景,而 CSS Animation 同样是一个令人愉悦的 Web 技术,当这两者结合时,oh,amazing~

SVG 也有内置的动画语法,如 animate,animateMotion 等,非本文讨论范畴(笔者对于此也不是很了解)

Animation SVG Moon

See the Pen SVG Animation Moon by EryouHao (@EryouHao) on CodePen.

是的,style 可以写到 svg 标签内部,这样你可以像引用 svg icon 一样直接使用带有动画 icon。另外的一个好处是,你可以将 svg 用于 img 标签,像使用一个 GIF 一样。下面这个图片就是上面代码所示的 svg 👇

animation svg

另外,你甚至可以像这样,提供一个富有交互的 icon(仅支持执行在代码中使用 svg)

hover animation svg

Animation unDraw

undraw.co 是一个非常棒的开源插图库,种类丰富,如果你想用插图丰富一下你的网页、Slide 或其他的任何东西,不妨一试,总能找到称心的。

偶然间,在 Youtube 上看到 @Dev Ed 发布的一个 Learn to Build An SVG Animation With CSS 视频,想到站在巨人的肩膀上,使用 CSS 将插图动起来将是多么令人振奋。Let's do it~

animation nature

emmm.... 动起来了,这里就不贴代码了(图片组成路径复杂导致代码略长),💡 相信你可以轻易找到查看代码的方式。

如果足够有创意和对 SVG 感兴趣,做一整套 Animation unDraw 也是不错的


延伸阅读:

最后更新于:
2020-08-20