The State of SVG Animation
Last updated 21st August 2013
Animation via SMIL
Reloading HTML page does not restart animation in Firefox and
Chrome. One must explicitly force the image to reload via, for
for Firefox and
(Aside: neither form works with Opera.)
Animation via CSS
Can't animate bar width; as width is an SVG attribute, not a property (which means you can't set it via CSS). Could possibly simulate by animating gradient stops.(?)
Reloading HTML page does not restart animation in Firefox and Chrome (works locally). One must explicitly force the image to reload. Both Firefox and Chrome require the "date" trick as used for Chrome above. When reloading the page this way in Chrome, the SVG text is slightly narrower(!).
Animation will restart when page is reloaded. With the <object> tag, the image steals clicks. This can be prevented in Firefox but not Chrome and Opera by adding pointer-events="none" to the SVG root element.
Chrome's animation is smooth, Opera (v12) is OK, Firefox is quite rough and needs some work.
This exercise took way longer that it should have, two full days in fact. The problem wasn't the raw coding but dealing with the inconsistencies in the way browsers handle SVG. Hopefully, there will be more consistency in the future.
A summary of the pain points in rough order of pain caused:
- Can't animate bar width (CSS).
- Animations (SMIL, CSS) are not restarted when page is reloaded (Chrome, Firefox).
- The unanimated bar width must be set to 0px or the bar will be shown before the start of the animation (SMIL). This prevents having a proper fallback drawing in the case SMIL is not supported. (The CSS property 'animation-fill-mode' has a value 'both' which handles this.)
- Can't prevent SVG from stealing mouse clicks when using <object> (Chrome, Opera).
- <object> 'height' property not used to reserve space during page layout resulting in page jumping when reloading HTML (Firefox, Opera).
- Image sizing different between <image> and <object> if 'viewBox' not given.
- Google+ doesn't use SVG images in post preview. (Nor could I force it to use a hidden PNG.)
One final thought... how does one make this type of drawing accessible? It seems the only way to do so is to include the data in the <image> 'alt' attribute.