Animating SVG.

In 2014, who would’ve thought that we would still be wrangling with SVG? A resolution-free, vector image format, perfect for the upcoming pixel-density wars (“Episode 4: There Is No Hope” premiering September 9), SVG was the way of the future back in 2011 when it was supported by all major browsers at the time. Unfortunately, it’’s still a disaster to wrangle. Different browsers still render the same standards, styles, and elements vastly differently; inline SVG is a pain to get perfectly responsive; and Firefox continues towards its goal of “worst modern browser” with absolutely abysmal support. A small look at various issues I’ve encountered just this afternoon:

• Inline SVGs show up as the correct width, but in Firefox they decided to make themselves as tall as they can, far exceeding their specified dimensions. This requires hacks with padding-bottom and absolute positioning on the SVG within the container to ensure nothing screwy.
• Even though Chrome is just fine with setting transform-origin and any translates using percentages (like every other element on a page), Firefox seems to require these to be pixel dimensions and nothing else.
• These pixel dimensions are relative only to the original size of the SVG (or whatever you have the viewbox set to), not to their actual display on screen, so you’re effectively working with fake numbers and math.
• Firefox is slow. CSS animations seem to fare a bit better than animating directly within the SVG element, but maybe that’s because I’m forcing hardware acceleration through the use of the translate3d(0,0,0) method (or hack, whichever you prefer).
• Firefox can’t seem to handle complex animations within SVG itself, so forces developers to rely on a JS method that was first created way back in 2008 called FakeSmile to get any modicum of parity across browsers.
• This is not even trying to tackle the apparently rampant issues with SVG in Safari, mostly because I did not want to open Safari today. (Or yesterday. And I probably won’t feel like it tomorrow either.)

Basically: it’’s a mess.

Is it worth it? Probably, but keep in mind that any project in which you intend to do SVG animation (without relying on an overly complex library like Snap.svg or Raphaël) will inevitably require lots of messing around and “fixes” to get working properly. Build that into your timeline and budget or you will not be a happy camper.

This post was originally published on September 3, 2014.