Svg animation with css - fallbacks IE

Question

What is the best option of fallback IE non supporting issue on CSS/SVG animations ?

Answer 1

Keep @m_a answer checked, just wanted to explain all available options as as fallback for people reading the question later and looking for an answer.

Before listing all options currently available having a look at http://caniuse.com/#search=svg will see that basic support for SVG in IE9+ with this issue though

IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.

so If you want to fallback IE9+ then you just keep using SVG, but for IE8 and below SVG file is not an option.

Also it is important to know the term "Sprite Animation" ⁽¹⁾ which basically represents a step-based animation showing a new slide or image in each step in fractions of the second, for smooth animation 20+ slides/second is better so that not to have quirky to human eyes.

1. CSS3 Animation and Transition:

CSS3 animation and transition and also the transform property could be used for simple and basic animations applied on DOM elements other than SVG elements but it is not supported in IE9 and below. As well as animating animated CSS properties it is possible to create "sprite animation" with CSS animation by making use of steps() like in this CSS sprite animation example.

---

2. JavaScript

I've seen very complex javascript animation back in 2005 and 2006, and there was a website whose owner made two identical versions of the website one totally in Flash and the other totally in javascript -which was slightly quirky though- this is a very basic and simple pure javascript.

With javascript -pure or jQuery⁽²⁾- you can change CSS properties in general but mostly for simple animation you'll use properties like positioning, color changing and opacity.

As well as above implementing "sprite animation" is possible too like in these two examples which I just made to mimic the "sprite animation" example in the CSS part above applied first on background position property and second on an 'img' tag with its parent element having overflow:hidden. again the image is .png but you can use SVG in the same way if you're looking for a fallback for IE9+ only.

There are also other JS libraries⁽³⁾ which could be used:

• Greensock with its GSAP API, is a good option since it is fast and provide fallback back to IE6, also could work with other js libraries as well as CSS and canvas, I like the way morphSVG works too.
• CreateJS [ Easeljs and TweenJS ] which works with HTML canvas -yeah right canvas are not supported in IE8 and below, there is a workaround for IE8 thought- and it provides exporting from flash files.

• Snap.svg looks simple and nice and works with SVG means only IE9+ are supported, so if you want a fallback for IE8 and below you can't use this one.

• RaphaelJS supports very old browsers including IE6+ and it produces scale-able vector because uses the SVG W3C and VML⁽⁴⁾ as DOM objects.

• Adobe Edge ⁽⁵⁾ lets you create HTML5 animation with an interface but I think it produces lots of javascript files. Also you can export from Edge to Snap.svg with some plugin I believe.

---

3. Flash:

Flash⁽⁶⁾ was used as best option for web designers for creating cross-browser animation for almost a decade but gradually was abandoned due to presenting CSS3 animation and the revolution of javascript as well as the handheld devices which stopped supporting Flash since around 2012.

Flash creates vector based graphics and key-frames based animations as well as the ability to embedfonts as vector in times were verdana, tahoma and times new roman were default fonts of the web before @font-face, to have vector graphics you can use the drawing tools inside the program or import Adobe Illustrator .ae files.

You can use Flash as great fallback for IEs as it is supported since long time as well as it produces scale-able vector graphics just like SVG does and offers tweening but it has it's scripting language⁽⁷⁾ which you mostly don't need unless if you want to offer interactions to the user, also -as far as I know- you can't access its structure with javascript.

Again for demonstration purposes I've also created this flash example which uses same "sprite animation" idea from the CSS part. Also created this vector graphics demo example .

---

UPDATE 1:

Upon a comment from the OP, for inline SVG, when DOM is ready -put javascript right before the closing </body> tag- you can do one of the following:

• Use Modernizr ⁽⁸⁾ which detects individual features of the browser -all browser not IE only- to detect whether the browser supports SVG features - in the link I included "inlinesvg", "svgclippaths" and "svgfilters" features you can add or remove features - then hit build and download it, check the documentation to know how to use it.

• Detect if the browser is IE or not, I modified this condepen and made this Demo Fiddle ⁽⁹⁾ to make a condition so that if it is IE and Version < 9 it replaces all inline .svg with the corresponding .png.

• There is this hack <!--[if IE]> stuff here <![endif]-->, used to work in older IE version, but not on IE10+ it won't work. so you can have this:

  <!--[if lt IE 9]>
      <script src="repSVG.js"></script>
  <![endif]-->
  

Which basically means, if IE Less Than 9 -hence the lt letters- load repSVG.js which will contain only the replacement and the replaceSVG() function, check this Demo Fiddle

For SVG as backgrounds, like if you're doing a "sprite animation", create another css file, say fix.css, which contains identical naming of all CSS rules that have .svg backgrounds, but with .png images instead, like:

in you 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;
}

in fix.css you have:

.foo { background:url(foo.png); }
.bar { background:url(bar.png); }

Then in the head section of your page do one of these:

• Use Modernizr to load the fix.css in the head if the browser doesn't support SVG as backgrounds.

• Again you can use this easy thing:

  <link rel="stylesheet" type="text/css" href="main-style.css">
  <!--[if lt IE 9]>
      <link rel="stylesheet" type="text/css" href="fix.css">
  <![endif]-->
  

• Use same logic in the Previous Fiddle to detect if browser is IE and version is less that a certain version, then load fix.css again in the head section.

Note that you need to make sure to have the method you chose from above after you load style.css so that when you load fix.css it will override the background-image properties of style.css.

^(*) Check CSS-Tricks: Using SVG.

---

UPDATE 2:

Thanks to @kaiido for mentioning SMIL⁽¹⁰⁾ with a polyfill, SMIL is a great option for SVG animation but the reason I didn't think it is an option it is because IE never adopted it, IE relied on its VML, this why I didn't think it would suit the OP.

Again thanks to @kaiido,I didn't know about this fakesmile which is:

SMIL implementation written in ECMAScript ... It is primarily targeted to SVG animations... FakeSmile makes declarative animations work in IE too.

However, I'm not sure if this fix will work in new versions of chrome, from MDN:

Chrome 45 deprecated SMIL in favor of CSS animations and Web animations.

Also from CSS-Tricks

Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features.

---

⁽¹⁾. Examples of spritesheet images

⁽²⁾. jQuery animation is slow compared to pure javascript animation, GSAP, or Createjs.

⁽³⁾. I've seen Greensock, EaselJS and Snap.svg in action but not for complex animation though just simple things similar to CSS3 animation.

⁽⁴⁾. Vector Markup Language (VML) is an XML-based markup used by Microsoft and is supported in IE5 - IE8 but is deprecated since the realese of IE9. it is also supported in MS Office 2000 and later.

⁽⁵⁾. Adobe Edge showcase examples.

⁽⁶⁾. As well as flash there are other software used to create .swf flash files but most of them don't offer rich features except SWiSH Max which offers good level of features.

⁽⁷⁾. ActionScript is the scripting language used in Flash and it is ECMAScript syntax like javascript.

⁽⁸⁾. Using feature detection is better than browser detection, because say someone uses an old browser other than IE, for example Safari5 or Opera12 then this fiddle won't fix it because it detects IE or not only not if the browser supports SVG or not.

⁽⁹⁾. If you open the fiddle in any browser other than IE8 and below it will show SVG otherwise it show PNG, to experiment it change this IEversion < 9 to IEversion < 14 and you'll see this affect all IE existing IE in the time of this post. Notice that, in case later Microsoft decided to release an IE version that supports SVG animation with CSS, presumeably IE16, you can make another condition for that, something like this demo fiddle.

⁽¹⁰⁾. SMIL stands for Synchronized Multimedia Integration Language, it has an XML-based syntax just like SVG, SVG animation using SMIL