可伸缩矢量图形（SVG）是一种用XML编写的图像格式。 使用SVG，您可以编码二维可缩放图形。 然后，您可以在CSS和JavaScript中实现和修改它们。
SVG允许使用三种类型的图形：矢量形状（所有方向和形状的直线和曲线），图像和文本。 由于其各种功能，Web设计人员会转向SVG制作复杂的动画。 它们易于安装，调整大小时不会损失质量，并且不需要任何第三方应用程序即可工作。
由于动画仍然越来越流行，因此大多数人都不熟悉它们。 本文将重点介绍20种出色的SVG动画，这些动画展示了这种格式的潜力。
1.按纸箱分类的医疗SVG图标
快速链接
- 1.按纸箱分类的医疗SVG图标
- 2.由SeanMcCaffery悬停
- 3.尼古拉·塔拉诺夫（Nikolay Talanov）下拉以刷新（纸平面）
- 4.继续前进Diaco M. Lotfollahi
- 5. SVG过滤器已添加到HTML5视频
- 6.拼图游戏
- 7.派翠克·杨（Patrick Young）的《眼线渐变》
- 8.让我们乘jjperezaguinaga旅行
- 9.穆罕默德·莫希比法尔的时钟
- 10. Luigi De Rosa的动画图标
- 11. Chris Gannon的SVG中的所有设备
- 12.克里斯·甘农的瀑布
- 13.布莱克·鲍文的《植物生成器》
- 14. Hamish Williams的Clickable图标
- 15. MarcoBarría的新蛋糕
- 16.克里斯·甘农（Chris Gannon）的碎纸机
- 17. GREYGHOST的Low PolyLion
- 18. Leela沙漏装载机
- 19.萨拉（Sarah Drasner）的回应牛
- 20.多曼尼的学生
- 轮到你了
这个温暖，流畅的动画非常适合与健康有关的任何网站。 当您列出不同的线程时，图像将巧妙地显示。 救护车或原子将构成，眼睛睁开，医生跳出来。 该动画显示了SVG的所有乐趣和活力。
链接
2.由SeanMcCaffery悬停
可以放置到任何交互式网站的通用动画。 当您将鼠标悬停在边框上时，边框的微妙外观使您感到满意，并邀请您单击链接。
链接
3.尼古拉·塔拉诺夫（Nikolay Talanov）下拉以刷新（纸平面）
通常，页面在您“拉下”时会刷新。 此动画将其带入了一个新的高度。 下拉释放它时，您将把一架纸飞机升空。 如果您希望访问者经常刷新您的应用程序，则应考虑添加这样的动画。
4.继续前进Diaco M. Lotfollahi
展示缩放向量潜力的SVG动画。 人体平稳准确的运动令人着迷。
链接
5. SVG过滤器已添加到HTML5视频
Google Chrome小组的Paul Irish研究了SVG如何修改矢量图形之外的内容。 他将CSS和SVG结合在一起，制成了惊人的视觉过滤器，以表明SVG动画可以很好地添加到现成的视频中。
链接
6.拼图游戏
您可以使用SVG动画制作令人惊叹的交互式拼图游戏。 在此示例中，我们可以选择许多图片之一，并查看它如何解构成拼图的许多小片段。 您也可以重建它！
链接
7.帕特里克·杨（Patrick Young）的衬纸渐变
如果您喜欢霓虹灯和漂亮的字体，您将喜欢这种动画。 这项工作说明了如何无需任何移动线条即可制作出精美的动画，只需要一个很棒的字体和具有渐变效果的正确颜色代码。
链接
8.让我们乘jjperezaguinaga旅行
两架飞机和一个热气球围绕着世界著名的地标旋转。 该动画色彩丰富，乐观而令人赞叹。 它显示了您精通SVG可以执行的所有操作。
链接
9.穆罕默德·莫希比法尔的时钟
移动时钟的简单SVG动画，显示当前时间。 指针的舒缓运动和简约的设计为该动画带来了奇迹。
链接
10. Luigi De Rosa的动画图标
如果将鼠标悬停在这些图标上，将触发动画，这很简单但是有效。 您可以看到，制作神奇的动画图标不必做任何奇迹。
11. Chris Gannon的SVG中的所有设备
一站式动画，涵盖了我们以最具创造力的方式使用的所有智能设备。 台式机将变成笔记本电脑，笔记本电脑变成平板电脑，然后变成智能手机。
链接
12.克里斯·甘农的瀑布
克里斯·甘农（Chris Gannon）的另一幅作品，这是一个充满泡沫的瀑布底部的巧妙演示。 水的运动很整齐，您可以看到飞溅的水滴小滴离开了动画的边界，使所有内容看起来都更加逼真。
链接
13.布莱克·鲍文的《植物生成器》
现在，这是另一回事。 当您点击“创建”按钮时，您将看到植物在生长和生长。 但是，每次单击时，都会形成不同的模式。
链接
14. Hamish Williams的Clickable图标
一旦单击动画，另一个交互式SVG就会触发动画。 单击该动画将启动“发送”动画。
链接
15. MarcoBarría的新蛋糕
有趣的动画逐层显示蛋糕的制作。 这是一款适合生日贺卡的令人印象深刻的SVG动画。
16.克里斯·甘农（Chris Gannon）的碎纸机
如果您喜欢看碎纸，则可以欣赏这个动画，该动画以无缝顺序无限制地用纸将机器切碎。
链接
17. GREYGHOST的Low PolyLion
这是令人叹为观止的插图和动画，描绘了以动画多边形的形式出现和消失的狮子的头。
链接
18. Leela沙漏装载机
另一种仅使用SVG的有效动画。 每5秒钟，沙漏将上下颠倒并开始一个新的周期。
链接
19.萨拉（Sarah Drasner）的回应牛
这是一个有趣的交互式动画，可让您单击一头母牛并将其拖到月球上，而困惑的宇航员看着它。
20.多曼尼的学生
一个热情的学生似乎准备学习！ 这是一个很棒的动画，书页整齐地翻着。 学生没有眨眨眼，但这仍然是一个很整洁的动画，可以得出这个列表。
链接
轮到你了
您最喜欢的SVG动画中没有包括哪些？ 在下面的评论中分享您的选择！
