矢量图形现在接管了Web甚至移动应用程序。网页或移动应用程序的图标，按钮和元素现在正变得越来越基于矢量，由于需要在各种屏幕分辨率，dpi，比率等上进行渲染，以及因为“缩放”到在移动浏览器上阅读效果更好的页面使位图资产变得丑陋且无法使用。

现在该开始在SVG中创建动画图标，背景和控件了，但是如何为SVG文件设置动画？

有关此问题的很多答案也发布在有关如何为网络插图制作动画的相关问题中。

避免SMIL动画

Sara Soueidan可能是网络上最好的 SVG 动画师，他写道： “我知道我写过SMIL动画指南，但是看到它们的未来，我不再亲自使用它们。” 你也不应该。

SMIL动画在任何IE，Edge，某些移动浏览器中均不起作用，并且正逐渐被Chrome / Opera丢弃（不过，最近，Chrome小组表示此弃用已暂时中止）。您应该避免99％的时间使用它们。

使用CSS制作非常简单的动画

SVG在很大程度上可以使用纯CSS进行动画处理（包括使用:hoverstate，transforms，transitions和animations）。它计划获得完全的CSS动画支持，但是目前仅支持其中的一部分，并且可能会出现跨浏览器问题。

Sara Soueidan 说 CSS非常适合动画SVG ，但更喜欢JS，因为它有助于解决这些跨浏览器问题。因此，请在可能的情况下使用它，但在动画更复杂或无法跨浏览器工作时退回JS。

如果CSS无法使用，请使用JavaScript动画

大多数情况下，可以使用少量JavaScript来对SVG进行动画处理，而无需JavaScript动画库。JS中的动画具有更多的跨浏览器支持，并且在基本了解的基础上非常易于使用。

对于需要使用时间轴或类似内容的复杂动画，使用GSAP之类的库可能会非常有帮助。还有无数其他SVG动画库，Snap.svg是另一个很大的库，但是大多数处理动画的能力不及GSAP那样容易。

对于特定类型的动画，使用特定的JS插件（例如GSAP的MorphSVG）可以为您节省大量时间，因为它们可以处理跨浏览器问题和所有计算。但是，大多数动画不需要这样的插件。有关更多信息，请参见“ SMIL功能替代指南”。

使用polyfill用于SMIL也可以接受，但是我很疲倦，因为它们没有得到广泛的使用/测试。话虽如此，Eric Willigers和FakeSmile是最常见的两个。

工装

我遇到的唯一可以导出到SVG + JS的软件是一个名为Lottie（以前称为Bodymovin）的Adobe After Effects插件，一个名为Flash 2 SVG的Flash扩展程序以及一个名为SVG Circus的小型在线工具。除此之外，诸如Adobe Edge Animate，Adobe Animate CC或Animatron之类的软件动画师会导出到不应使用的SMIL动画中。因此，最好让一些开发人员使用从编辑器导出的SVG制作SVG + CSS或SVG + JS动画。Inkscape有大量资源可链接教程和示例。

我敢肯定，将来会有更多的动画软件支持导出到SVG + JS。

其他一些重要注意事项

• 重要的是要牢记性能。Sara Drasner 为SVG创建了一些性能基准测试，该基准测试表明您应尽可能选择硬件加速的CSS动画，但在不可能的情况下应选择好的 JavaScript方法。

• 最好是在<object>标签中使用SVG，或者<svg>如果它是交互式的，则直接在XML元素中嵌入；如果它不是交互式的，则最好作为背景图像使用，但是还有其他方法也可以这样做。

要更全面地了解网络动画，请阅读Rachel Nabor 在A List Part上的帖子。对于工具方面的其他建议，这篇文章非常有帮助，尽管我不同意所有观点，尤其是它如何呈现SMIL动画。

我一直发现依赖JS库以外的任何东西都是WRT支持/维护的巨大痛苦。

我一直使用D3.js。它最初是为了从数据集中创建交互式SVG / DOM元素而创建的。但是，您可以修改页面中包含的SVG / DOM，只要JS可以访问它即可。

我已经在各种项目中使用了SVG / DOM。一些示例包括软实时仪表板，地图可视化，DOM转换以及创建要包含在PDF中的SVG文件。我在网络上也看到了它。该网站有很多示例，并提供了使用该网站的页面的链接。

我推荐它是因为它与跨浏览器完全兼容，具有活跃的社区并且易于学习。查看该网页，并注意现实世界中使用的内容，以查看您可以使用该功能的小样本。

以下是对svg进行动画处理的可能方法：

SVG SMIL动画

可以通过称为SMIL的强大本机标记语言对SVG进行动画处理，该语言直接从Adobe Animate CC + flash2svg插件等动画工具中导出。

要在没有支持的浏览器上使用SMIL为SVG制作动画，您只需要使用SMIL polyfill。

polyfill是一段特殊的javascript代码，它为浏览器缺少的功能提供支持，将原始编码转换为浏览器可以理解的编码。

Eric Willigers制造的SMIL polyfill就是这样做的：它将SMIL转换为Web动画API，甚至Microsoft浏览器也支持。它是如此高效，以至于Google Chrome开发人员决定放弃对本地SMIL的支持，而将精力集中在Web动画上，而由Eric Willigers来完成在Chrome中播放SMIL文件的任务。

有人错误地认为这是Chrome对SMIL的弃用，并批评了开发人员的这种选择。但这并不是真正的弃用，只是重新定位了在polyfill级别上解释SMIL的工作。

实际上，Chrome开发人员自己在正式宣布不赞成使用SMIL的正式声明中引用了Willigers polyfill。

因此，如果您在网上阅读有关SMIL灭亡的信息，请不要担心。SMIL的“死亡”被大大夸大了。更像是重生。

要在所有浏览器（包括IE和EDGE）上使用SMIL，只需将以下javascript polyfill添加到您的网页即可：

https://github.com/ericwilligers/svg-animation

这是一个演示页面，其中使用了流行的flash2svg导出器的作者Tom Byrne制作的polyfill：

没有polyfill的页面：http ://www.tbyrne.org/staging/smil-polyfill/tears.htm

以及与polyfill相同的页面：http ://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

如果您查看源代码，这几乎是不言而喻的。

此外，polyfill的性能通常也比原始SMIL更好，因为在许多浏览器中，Web Animations是硬件加速的，而SMIL通常不是。

SVG SMIL中的导出动画

创建SVG动画的更简单方法是使用Adobe Animate CC之类的工具绘制它们，并使用Flash2svg（https://github.com/TomByrne/Flash2Svg）之类的插件将其导出到SVG中。有了它，您可以将几乎所有的动画和声音导出为单个SVG文件，例如以下卡通情节：http :
//www.tbyrne.org/portfolio/smil/LoveDota.svg

SVG动画JS库

JavaScript方式更复杂。首先，您需要成为一名JavaScript程序员。然后，您必须在许多库之间进行选择。最受欢迎的是：

• SnapSVG http://snapsvg.io
  该库是同一作者制作的古老而流行的Raphael动画库的继承者。非常稳定，但是它会在运行时以内部格式转换SVG进行动画处理。变形选项也非常基本，只是线性插值。（注意：还有一个Adobe Animate CC的snap.svg插件，但是导出的文件过大。导出器为动画的每个帧（而不是每个关键帧）都生成一个snap svg命令，从而生成具有1000行以上的18Kb svg文件代码，只需将一个简单的矩形旋转360度即可。Flash2svg插件效率更高，只需一个命令和几个字节即可完成相同的工作）。

• Greensock MorphSVG
  http://greensock.com/morphSVG
  一个功能完备的变形库，可轻松对SVG进行动画处理，而无需将其转换为内部格式。只需在Inkscape中创建3-4个svg关键帧，Greenock SVGMorphing lib将自动在帧之间进行插值并创建所有中间帧以实现流畅的播放。这是一个示例：http :
  //codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  如果要在3D中进行动画制作，此库非常强大。
  Seen.js在SVG中渲染3D .obj文件网格，并非常轻松地对其进行动画处理。

SVG图像编辑器

至于工具，您可以主要使用以下三个软件来创建动画关键帧：

• Inkscape：开源，具有众多功能，其高级矢量编辑包由参加SVG工作组的人员制作。SVG格式的参考。不容易学习。

• Adobe Illustrator：商业功能非常强大的矢量绘图软件，它提供了SVG尚不支持的许多功能，但与格式的兼容性最差。您通常需要手动编辑导出的SVG文件，以修复Illustrator混乱。但是它在艺术学校中非常受欢迎，所有制图人员都知道如何使用它。

• Affinity Designer：这是一个商业软件，例如Illustrator，但是具有极佳的SVG兼容性，几乎与Inkscape级别相同。UI更加友好，并且现在在SVG艺术家中变得非常流行。

SVG动画编辑

当前唯一的SVG动画编辑器是这样的：

• Adobe Animate CC：Adobe完全重写了以前的Adobe Flash Pro，以从现已过时的Flash动画迁移到现代SVG动画。您可以将生成的SVG动画与自定义javascript库一起导出，也可以选择使用“ flash2svg”之类的插件保存在SVG + SMIL中。最后一个选项非常有效，我总是使用它代替instead肿的本机导出器。

您可以从此处下载免费的插件：https : //github.com/TomByrne/Flash2Svg

或从Adobe Plugins面板安装它：https : //creative.adobe.com/addons/products/7232

不幸的是，Adobe Animate CC是商业化的。有免费的开源替代动画应用程序，但我都尝试了它们，但它们仍然吸引恕我直言。让我们对未来充满希望。

参考资料：
关于该主题的更详尽的博客文章：https : //medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

有关snap.svg的案例：https ://stackoverflow.com/questions/35727635/adobe-animate-snap-svg-plugin-huge-files