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

避免 SMIL 动画

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

SMIL 动画在任何 IE、Edge、一些移动浏览器中都不起作用，并且正在逐渐被 Chrome/Opera 放弃（尽管最近，Chrome 团队表示此弃用已暂时中止）。您应该在 99% 的时间内避免使用它们。

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

SVG 在很大程度上可以使用纯 CSS 进行动画处理（包括使用:hoverstates、transforms、transitions 和animations）。计划获得完整的CSS 动画支持，但目前只支持一些，并且可能存在跨浏览器问题。

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

如果 CSS 不起作用，请使用 JavaScript 动画

大多数时候，SVG 可以使用一点 JavaScript 来制作动画，而不需要 JavaScript 动画库。JS 中的动画具有更多的跨浏览器支持，并且在一些基本了解的情况下相当容易使用。

对于需要使用时间线或类似工具的复杂动画，使用像GSAP这样的库会非常有帮助。还有无数其他 SVG 动画库，Snap.svg是另一个大库，但大多数都不像 GSAP 那样轻松或高效地处理动画。

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

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

工装

我遇到的唯一导出到 SVG+JS 的软件是一个名为Lottie（以前称为 Bodymovin）的 Adob​​e 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 元素而创建的。但是，只要 JS 可以访问它，您就可以修改页面中包含的 SVG/DOM。

我在各种项目中使用过创建/动画 SVG/DOM。一些示例包括软实时仪表板、地图可视化、DOM 转换，以及创建 SVG 文件以包含在 PDF 中。我也在网上看到过。该网站有大量示例和指向使用它的页面的链接。

我推荐它，因为它相当跨浏览器兼容，有一个活跃的社区，并且易于学习。看看网页，注意现实世界的用途，看看你可以用它做些什么的小样本。

以下是动画 svg 的可能方法：

SVG SMIL 动画

SVG 可以通过其强大的本地标记语言（称为 SMIL）进行动画处理，直接从 Adob​​e Animate CC+flash2svg 插件等动画工具导出。

即使在缺乏支持的浏览器上也可以使用 SMIL 为 SVG 设置动画，您只需要使用 SMIL polyfill。

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

Eric Willigers 制作的 SMIL polyfill 就是这样做的：它将 SMIL 转换为甚至 Microsoft 浏览器都支持的 Web 动画 API。它非常高效，以至于 Google Chrome 开发人员决定放弃对原生 SMIL 的支持并专注于 Web 动画，让 Eric Willigers polyfill 来完成在 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 动画的更简单方法是使用 Adob​​e 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
  这个库是同一作者制作的老的流行的拉斐尔动画库的继承者。非常稳定，但它会在运行时将 SVG 转换为内部格式以对其进行动画处理。变形选项也很基本，只是线性插值。（注意：还有一个用于 Adob​​e Animate CC 的 snap.svg 插件，但导出的文件很臃肿。导出器为动画的每一帧而不是每个关键帧生成一个 snap svg 命令，生成一个 18Kb 超过 1000 行的 svg 文件代码，只是将一个简单的矩形旋转 360 度。Flash2svg 插件效率更高，只需一个命令和几个字节即可完成相同的工作）。

• Greensock MorphSVG
  http://greensock.com/morphSVG
  一个功能齐全的变形库，可以轻松地为 SVG 制作动画，而无需将它们转换为内部格式。只需在 Inkscape 中创建 3-4 个 svg 关键帧，Greenock SVGMorphing 库将自动在帧之间插入并创建所有中间帧以实现流畅播放。这是一个例子：
  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 文件以修复插画师的混乱。但它在艺术学校非常流行，所有图形师都知道如何使用它。

• Affinity Designer：这是一款类似于 Illustrator 的商业软件，但具有出色的 SVG 兼容性，几乎达到了 Inkscape 的水平。UI 更加友好，现在它在 SVG 艺术家中变得非常流行。

SVG 动画编辑器

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

• Adobe Animate CC：以前的 Adob​​e Flash Pro 被 Adob​​e 完全重写，从现在过时的 Flash 动画迁移到现代 SVG 动画。您可以将生成的 SVG 动画与自定义 javascript 库一起导出，或者选择使用“flash2svg”等插件保存在 SVG+SMIL 中。最后一个选项非常有效，我总是使用它而不是臃肿的原生导出器。

您可以从这里下载免费插件： https ://github.com/TomByrne/Flash2Svg

或从 Adob​​e 插件面板安装： 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