Why isn't this SVG animation working cross-browser? - google-chrome

Question

I have an SVG image generated for me by www.loading.io, and the animation is only working on Google Chrome (v. 48). I have tried opening the file in Internet Explorer 11, Firefox (v. 44), and Edge (v. 25), and they only render the initial image without any animation. Example. You can observe the behavior for yourself as well by downloading the SVG here.
Here is the SVG markup:
<?xml version="1.0" encoding="utf-8"?>
<svg width='50px' height='50px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
class="uil-ring">
<rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
<circle cx="50" cy="50" r="46" stroke-dasharray="145.95839468578177 143.06812944447918" stroke="#285e8c" fill="none"
stroke-width="8">
<animateTransform attributeName="transform" type="rotate" values="0 50 50;180 50 50;360 50 50;"
keyTimes="0;0.5;1" dur=".75s" repeatCount="indefinite" begin="0s"></animateTransform>
</circle>
</svg>
Does anyone know how I can get this nice little SVG to animate on all modern browsers?

Answer 1

The SMIL specification says that durations cannot start with a . character - a leading zero is required and that's what Firefox implements. I've corrected things below so it works in Firefox.
IE does not support SMIL although the fakeSmile library can be used to overcome that.
<?xml version="1.0" encoding="utf-8"?>
<svg width='50px' height='50px' viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
class="uil-ring">
<rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
<circle cx="50" cy="50" r="46" stroke-dasharray="145.95839468578177 143.06812944447918" stroke="#285e8c" fill="none"
stroke-width="8">
<animateTransform attributeName="transform" type="rotate" values="0 50 50;180 50 50;360 50 50;"
keyTimes="0;0.5;1" dur="0.75s" repeatCount="indefinite" begin="0s"></animateTransform>
</circle>
</svg>