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…
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.
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!
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:
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.
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.