保持@m_a答案处于选中状态，只是想解释所有可用的选项，作为稍后阅读问题并寻找答案的人们的后备。
在列出当前可用的所有选项之前，请查看http://caniuse.com/#search=svg将看到IE9+ 中对 SVG 的基本支持存在此问题
IE9-11 桌面和移动设备无法正确缩放 SVG 文件。添加高度、宽度、viewBox 和 CSS 规则似乎是最好的解决方法。
因此，如果您想回退 IE9+，那么您只需继续使用 SVG，但对于 IE8 及以下版本，SVG 文件不是一个选项。
另外，了解术语“精灵动画” (1)也很重要，它基本上表示基于步骤的动画，以秒的几分之一的形式在每个步骤中显示新的幻灯片或图像，对于流畅的动画，每秒 20 张以上幻灯片更好，这样不要对人的眼睛有古怪。
CSS3 动画和过渡以及变换属性可用于应用于除 SVG 元素之外的 DOM 元素上的简单和基本动画，但 IE9 及以下版本不支持。除了动画 CSS 属性之外，还可以通过使用CSS 精灵动画示例 中的CSS 动画来创建“精灵动画” 。steps()
我在 2005 年和 2006 年见过非常复杂的 javascript 动画，有一个网站，其所有者制作了两个相同的网站版本，一个完全用 Flash，另一个完全用 javascript -虽然有点古怪- 这是一个非常基本的动画和简单的纯javascript。
使用 javascript -纯或 jQuery (2) - 您通常可以更改 CSS 属性，但大多数情况下对于简单动画，您将使用定位、颜色更改和不透明度等属性。
与上面实现“精灵动画”一样，在这两个示例中也是可能的，我只是为了模仿上面CSS部分中的“精灵动画”示例，首先应用在背景位置属性上，然后应用在“img”标签上父元素具有overflow:hidden. 图像仍然是这样.png，但如果您只寻找 IE9+ 的后备方案，则可以以相同的方式使用 SVG。
还有其他可以使用的JS 库(3) ：
Snap.svg看起来简单又漂亮，并且可以与 SVG 一起使用，这意味着仅支持 IE9+，因此如果您想要 IE8 及更低版本的后备版本，则不能使用此版本。
RaphaelJS支持非常旧的浏览器，包括 IE6+，并且它生成可缩放矢量，因为使用 SVG W3C 和 VML (4)作为 DOM 对象。
Adobe Edge (5)允许您使用界面创建 HTML5 动画，但我认为它会生成大量 javascript 文件。我相信你也可以使用一些插件从 Edge 导出到 Snap.svg。
Flash (6)近十年来一直被网页设计师用来创建跨浏览器动画的最佳选择，但由于 CSS3 动画的出现和 JavaScript 的革命以及自 2012 年左右开始停止支持 Flash 的手持设备而逐渐被放弃。
Flash 创建基于矢量的图形和基于关键帧的动画，并且能够将字体嵌入为矢量，以前 verdana、tahoma 和 new roman 都是 Web 的默认字体@font-face，要获得矢量图形，您可以使用 Flash 中的绘图工具。编程或导入 Adobe Illustrator.ae文件。
您可以使用 Flash 作为 IE 的绝佳后备，因为它长期以来受到支持，并且它可以像 SVG 一样生成可缩放的矢量图形并提供补间，但它有脚本语言(7)，除非您基本上不需要它如果您想向用户提供交互，据我所知，您也无法使用 javascript 访问其结构。
再次出于演示目的，我还创建了这个Flash 示例，它使用CSS 部分中相同的“精灵动画”想法。还创建了这个矢量图形演示示例。
更新1：
根据 OP 的评论，对于内联SVG，当 DOM 准备好时 -将 javascript 放在结束标记之前 - 您可以执行以下操作之一：</body>
使用Modernizr (8)检测浏览器的各个功能 -所有浏览器，不仅仅是IE - 检测浏览器是否支持SVG 功能- 在链接中我包含了“inlinesvg”、“svgclippaths”和“svgfilters”功能，您可以添加或删除功能 - 然后点击构建并下载它，检查文档以了解如何使用它。
检测浏览器是否为 IE，我修改了这个condepen并制作了这个Demo Fiddle (9)来设置一个条件，以便如果它是 IE 并且版本 < 9，它会将所有内联替换.svg为相应的.png.
有这个 hack <!--[if IE]> stuff here <![endif]-->，曾经在旧版 IE 中工作，但在 IE10+ 上不起作用。所以你可以这样：
<!--[if lt IE 9]>
<script src="repSVG.js"></script>
<![endif]-->
这基本上意味着，如果 IE 小于 9 -因此lt字母 - 加载repSVG.js将仅包含替换和replaceSVG()功能，请检查此Demo Fiddle
对于 SVG 作为背景，就像您正在制作“精灵动画”一样，创建另一个 css 文件，例如fix.css，其中包含所有具有背景的 CSS 规则的相同命名.svg，但使用.png图像，例如：
在你身上style.css：
.foo {
width:300px;
height:120px;
background:url(foo.svg);
background-size:300px 120px;
}
.bar {
width:200px;
height:50px;
background:url(bar.svg);
background-size:200px 50px;
}
在fix.css你有：
.foo { background:url(foo.png); }
.bar { background:url(bar.png); }
然后在head页面的部分中执行以下操作之一：
fix.css如果head浏览器不支持 SVG 作为背景，请使用 Modernizr 加载。
您可以再次使用这个简单的东西：
<link rel="stylesheet" type="text/css" href="main-style.css">
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="fix.css">
<![endif]-->
使用上一个Fiddle中相同的逻辑来检测浏览器是否为IE并且版本是否低于某个版本，然后fix.css在该部分中再次加载head。
请注意，您需要确保在加载后style.css具有您从上面选择的方法，以便加载时fix.css它将background-image覆盖style.css.
(*)检查CSS 技巧：使用 SVG。
更新2：
感谢@kaiido提到SMIL (10)和 polyfill，SMIL 是 SVG 动画的一个很好的选择，但我不认为它是一个选项的原因是因为IE 从未采用它，IE 依赖于它的 VML，这就是为什么我认为这不适合OP。
用 ECMAScript 编写的 SMIL 实现...它主要针对 SVG 动画...FakeSmile 使声明式动画也可以在 IE 中工作。
但是，我不确定此修复程序是否适用于新版本的 chrome（来自MDN）：
Chrome 45 弃用了 SMIL，转而使用 CSS 动画和 Web 动画。
也来自CSS-Tricks
2015 年 12 月更新：在此更新时，SMIL 似乎快要消亡了。Sarah Drasner有一份关于如何替换其某些功能的指南。
(1) . spritesheet 图像的示例
(2) . 与纯 JavaScript 动画、GSAP 或 Createjs 相比，jQuery 动画速度较慢。
(3) . 我见过 Greensock、EaselJS 和 Snap.svg 的实际应用，但不是复杂的动画，尽管只是类似于 CSS3 动画的简单东西。
(4) . 矢量标记语言 (VML)是 Microsoft 使用的基于 XML 的标记，在 IE5 - IE8 中受支持，但自 IE9 发布以来已被弃用。MS Office 2000 及更高版本也支持它。
(5) . Adobe Edge 展示示例。
(6) . 除了 Flash 之外，还有其他软件用于创建Flash 文件，但除了SWiSH Max.swf提供良好的功能之外，大多数软件都不提供丰富的功能。
(7) . ActionScript是Flash中使用的脚本语言，它是像javascript一样的ECMAScript语法。
(8) . 使用功能检测比浏览器检测更好，因为假设有人使用 IE 以外的旧浏览器，例如 Safari5 或 Opera12，那么这个小提琴将无法修复它，因为它会检测 IE，或者不仅不会检测浏览器是否支持 SVG。
(9) . 如果您在 IE8 及以下版本以外的任何浏览器中打开小提琴，它将显示 SVG，否则它将显示 PNG，为了进行实验，将其更改为IEversion < 9，IEversion < 14您将看到这会影响本文发布时的所有 IE 现有 IE。请注意，如果稍后 Microsoft 决定发布支持带有 CSS 的 SVG 动画的 IE 版本（大概是 IE16），您可以为此设置另一个条件，例如这个演示小提琴。
(10) . SMIL 代表同步多媒体集成语言，它具有基于 XML 的语法，就像 SVG 一样，SVG 动画使用 SMIL