First impressions animating SVGs with CSS3 keyframes

JS

Having just finished my first attempt at SVG/CSS keyframe animation I thought I would share some of the pros and cons of my experience.

The Concept

If you are reading this in early 2015 you would be greeted on the front page of this site with the above happily animated characters. These characters represent four technologies (HTML5, Android, IOS and Javascript) along with a bulbous headed version of yours truly. They each slowly shift around in slightly different ways to express a little personality without becoming overly annoying.

Drawing the characters

All the characters were drawn in Sketch. While Sketch is a wonderful vector drawing tool I did experience a few gotcha’s when exporting SVGs to the browser.

  1. Blending modes don’t render.
    On the Apple character I was using a overlay blending mode on the left side of the character to change its colors. When I viewed the SVG in the browser it ended up showing as a solid shape. The fix was to redraw the character without the overlay.
  2. Don’t use the radius slider.
    For the android character’s arms I used a normal rectangular object with Sketch’s radius slider to round out the corners. When rendered in the browser the corners lost their rounded shape and where instead squared off. To get rounded corners I had to instead use the “rounded corner rectangle” object.
    Sketch rendering issues
  3. Flatten boolean based objects.
    Shapes created from boolean operations were flattened to make the shapes as simple as possible. I’m not sure if this step was necessary but thought it might help reduce the objects complexity.

Optimizing the SVGs

After exporting the final SVG from Sketch I used SVG Cleaner to remove all the cruft and diminish the final file size.

SVG Cleaner UI

I had also experimented with the site SVG Optimiser but found SVG Cleaner did a significantly better job of reducing the size of the file. Check out the file size comparison:

SVG Cleaner: 34.2KB => 14.9KB (-43.49%)
SVG Optimiser: 34.2KB => 32 KB

Embedding the SVG

For this project I decided to use in-line SVGs, meaning that the SVG is placed directly inside the HTML file. This method allows the SVG to become part of the DOM and directly manipulated through external style sheets and Javascript. I have been trying to get the more preferred <object> tag to work, but haven’t yet had much success. Although the SVG shows up, I was not able to use CSS to style anything other then the size. The great advantage when using the <object> tag is that you can provide a fall-back image to older browsers that don’t support SVGs.

Firefox and Internet Explorer Woes

Setting up and using keyframe animations in Webkit based browsers was smooth and event free. Everything worked just as it was suppose to. Firefox on the other hand gave me some headaches and forget about IE, it still remains sadly behind in standards implementation.

The first issue I had with Firefox was that it didn’t correctly respect the “transform-origin” property. To get the characters head to rotate properly the rotation point must be moved from its default position at the center of the group to the bottom center of the group.

transform-origin-new

Firefox appears to keep the origin in the center of the group no matter what I tried. I’m hoping there is an obvious solution I’m overlooking. I ended up just overriding the default keyframe animation with Firefox prefixes to minimized the amount of rotation. While not great, the rotation is much less awkward.

The bigger issue I had in Firefox was that using keyframes in the animation caused my computer’s CPU to spike over 50%. A search on Stack Overflow showed that Firefox has a known issue with keyframes. While I did read another post that said this behavior has been fixed, my personal experience so far seems to be that Firefox still requires additional optimization.

Since this was a personal project I have to admit defeat trying to get the animations to work correctly in IE. In IE the SVG is visible, but none of the keyframes work, all the characters can do is blink. Another oddity is that while all the other browsers out there use the “width” property to size the SVG, IE uses “height” and won’t accept percentage. Instead it would only size correctly when I explicitly specified the height, which in turn broke its ability to be responsive. Arggh! IE 11 doesn’t support conditional statements anymore so the only way around this whole debacle was to go nuclear and use Javascript to detect if it was IE, then attach a class of “IE” to the SVG so it could be styled differently. I know browser sniffing is an ugly hack but here is the code I used:

Conclusion

Overall I am very happy with the results. Like everything new there is a learning curve and I can see that my issues with Firefox and IE will need additional research. However, count me in as an official fan of SVGs! I want to do a lot more with these little wonders in the near future so expect more tests to come.

Like to leave a comment?

Comments have been automatically closed on this post but don't let that stop you. Hit me up on following networks: