HTML5 animations and SVG

HTML5 animations and SVG

Edge Animate is by far the best tool you can use to create stunning HTML animations. Available in the Creative Cloud, Edge Animate lets you import PNG or SVG files. I ran some tests to better understand when I should use PNG files and when I should use SVG files. I’ve already explained how to export transparent PNG files from Illustrator. To produce SVG files, the classic “Save As > SVG 1.1” feature of Illustrator is enough. The main benefit of SVG is that the image can scale down or up to fit in any size display, and any screen density. But what is the impact on HTML animations? Will my SVG illustrations move as fast as my PNG images? Let’s run some tests…

Classic shapes

For the first animation, I created a basic cloud shape with gradients.

The animation is very smooth on my Mac and on my iPad Retina. The SVG illustration is lighter (1.6Kb) than the PNG image (5Kb), and the gradients are obviously more beautiful when I scale the clouds to 200%. It’s hard to see it on a classic desktop screen, but it’s obvious on a Retina display. To feel the difference on a classic desktop screen, zoom in 400% your browser view.

SVG is in this case the best choice. Check the browsers compatibility before using SVG: http://caniuse.com/svg – on Android for instance, SVG is supported since version 3.

Type-based logo

I’m often reluctant to animate type-based PNG images. Aliasing tends to reduce the sharpness of the logo and the impact of a brand. To avoid font-embedding issues, I’ve typed a word in Illustrator and I’ve converted the characters to shapes (Create Outlines).

Again, it’s difficult to feel a difference on my desktop computer, but on my iPad Retina, it’s a big win for SVG. Try the animation on a Retina device, and zoom in. You’ll notice the difference. Both file sizes are 6Kb. Next time, I’ll try to use embedded fonts with SVG for SEO purposes–another benefit of SVG!

Complex illustration

SVG looks like the ideal solution, but what about complex illustrations with a lot of vector graphics? To produce an illustration, I’ve used Adobe Ideas, a touch application on my iPad. When you draw illustrations in Adobe Ideas, the drawings are synchronized in the Creative Cloud, and you can open them in Adobe Illustrator on your desktop. Adobe Ideas creates vector graphics. All the vectors and the layers are kept in Illustrator. Here is the Edge Animation based on my drawing in Adobe Ideas:

The PNG file is a light 88kb file while the SVG file is a 304Kb file. On my Mac, the animations are smooth, but on my iPad, the SVG file contains too much information and stresses the performance of the device. The animation is very laggy as you can see on this video recorded on my iPad. The video features the three animations produced with Edge Animate for this article running on my iPad Retina:

HTML animations on the iPad Retina from michael chaize on Vimeo.

The third animation is very choppy with the SVG file. Too much data for the rendering engine of Safari on iOS :) But… it’s an extreme case.

Conclusion

Web designers must consider SVG for static icons and illustrations. As it’s a vector technology, SVG files can be easily produced with Illustrator. SVG images perfectly scale and are sharp on high-density screen devices such as the iPad Retina. If you plan to create HTML5 animations, SVG can also be very useful for simple shapes and type-based illustrations. As vector graphics (then SVG) are rasterized at a specific resolution every time they are viewed, you shouldn’t use SVG for complex illustrations. My third example demonstrates the poor performance of a complex SVG on the iPad. That said, I could have worked within Illustrator to simplify my illustration, reducing the number of vectors without impacting the perception of my drawing.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

7 Comments

  1. Great review, very helpful for those of us want to make big animations using adobe edge. Thanks

  2. Thank you Michael for spreading awareness. As an illustrator, I want clarity of my graphics in its final display. We have been able to achieve that with vector graphics in print for many years, but we need more web developers to be on board with SVG. With SVG, the possibilities of an illustrator-developer team are tremendous.

  3. Thanks a lot Alex. I’m trying to do animations in edge, using illustrator and a tablet as my drawing tool. It was especially helpful to see the video, as the SVG renders great on my iMac 27″ in chrome, so I wouldn’t have known it doesn’t work so well on a new iPad Retina.

    If you wouldn’t have animated the 3rd drawing so much, would the performance have been as bad?

  4. Hi, can you please tell me how to import SVG / PNG files as SEQUENCE into Adobe Edge Animate. I have a sequenceof PNG files of a short animation designed in Flash, but i cant seem to figure out how to import it into edge to get the animation running. I only see the option of importing one png file. Appreciate ur help. thanks

  5. Hi, I wonder if you can help? Ive created a menu in Muse using the accordian widget which Im happy with, to indicate there is a menu Ive used a menu icon but what Im trying to achive is when the menu icon is click to open the menu (an accordian widget) the icon then changes to an ‘X’ to indicate if you press the icon again it will close the menu. Unfortunatly you cant change text in the active state from normal state only colour, does you know how to achive this? I thought of creating an icon that changes using javascript and perhaps Font Awsome icons then embeding that into the title bar of the accordian widget as way around it, or using Edge Animate perhaps??? Spent hours trying to achive any recommendations greatly appriciated!!!!

Submit a Comment

Your email address will not be published. Required fields are marked *