Powerful SVG Animation

I once used to create web animations by HTML and CSS, however, due to their limitation, I started to turn to SVG, which offers me more interesting capabilities.

Years ago, when I saw some beautiful animations and data visualizations on internet, I failed to save them by right clicking mouse. However, I was surprised that the text in animation could be copied and pasted.

Something like these:

From http://www.polygon.com/a/xbox-one-review

(The examples here are GIF, not real SVG)

Flat Workspace by Hoàng Nhật
Let’s Travel by jjperezaguinaga
Motion for the web by LegoMushroom
Heart Animation by Nikolay Talanov

Also like this beautiful infographic made by D3.

In SVG, all texts are super clear and won’t be blurring, you couldn’t right clicking the mouse to save the image, but the text in the image can be copied and pasted, this is another benefit from SVG.

All designers working for the internet hope to create clear enough images (e.g., Logo, icons, and any decoration images). Besides to assure all images are high-resolution on different devices, we also hope to max the optimization. SVG is a good solution. SVG, which stands for Scalable Vector Graphics, is an application of XML that makes it possible to represent graphic information in a compact, portable form. SVG can be infinitely scalable, responsive, have smaller file size, is future-proof for next-generation high-resolution screens, and it can be styled, animated and interacted with using CSS and Javascript, which is the best part.

So here is the true story, recently I met a design problem in my work, and I found SVG saves my life.

The company I’m working (Verdigris Tech) is an AI start-up recognized for transforming commercial buildings into smart, sustainable environments by smart electrical sensors, make the facility managing to a smarter and more responsive way. Sounds cool, right? Well, but I have to say the installation process was really painful.

The installer (electrician) installed our products on the panel.

For this complicated installation process, all we had was an installation manual. It has dozens of pages and full of texts. More than that, the installation path will be varied according to panel status, like high-voltage vs. low-voltage, 3-phase panel vs. split-phase panel, and the usage of color wires will also be different based on different countries and areas. Even for professional electricians, reading this manual to complete our installation process is an impossible task.

Installation Manul

For building a better user experience, we decided to develop a Quick Start Guide, which works on a smart mobile phone, the project objective is to condense “heavy” texts in our current installation manual book by using a lot of images and animations. It also should generate a simple path for installers to follow.

Talk about images and animations, the traditional way is using .jpeg or .png format to save images and using .gif to save animations, but the drawback is the size of the file will be big, and the worst point is these pictures and animations are not responsive to nowadays high resolution. Another consideration was I hoped to use CSS and Javascript to control image and animation. For example, according to high-voltage or low-voltage panel, and different countries and areas, we can use code to control colors of wires rather than I create them individually. So finally, I decided to use SVG.

There are two ways to generate SVG; the first method is using code to “draw” points, lines, and surfaces. This method is useful for simple graphics (some logos and icons). By directly using program could generate clear code, and accessible for controlling. The second way is by using vector image software (Adobe Illustrator, Sketch, and Affinity Designer etc.) to draw graphics, and then export SVG format. This method is more intuitive to designers, but the drawback is the exported file has not been optimized and will make later controlling work harder. Thank God there are many SVG optimizing website and tools, I typically using SVGOMG website, on it I upload my exported SVG and then download for use.

SVGOMG website

Besides move, scale, and animations along with the path, SVG can also play such like complex movie-looking animations. In the old days, people used to use 24fps, which is 24 frames per second. Old animators tried to find a balance between action evenly and less frame drawing, then the “shooting on twos” technique came out, which stands for using every frame twice, so just need 12 frames drawing for each second.

In our company product system, we have a smart circuit translator, it looks like a clamp, and needs to be clamped on the circuit in a panel.

Verdigris Smart Circuit Translator

As I know, nobody knows how to open this “clamp,” from hardware UX perspective, it’s indeed not a good design. As a graphic designer, I thought if I could use animation to show installer how to open this “clamp,” that will make installer’s life easier.

So, I tried to use SVG animation to present the opening process. First of all, I estimated to use 1.5 seconds to play this animation, according to 24fps, it needs 36 frames in total, and base on “shooting on two” method, I only need to draw 18 frames and copy each one.

I drew the frame sequence in Sketch, made all of them in a group (this step is necessary), then export the biggest group to SVG format. At here, the size of each frame is 312×240 px, the total length is 8640 px, then I controlled the animation in CSS code.

Here is the final effect.


Besides using in small animations, SVG also broadly be used in infographic,

like these,

http://www.antievictionmappingproject.net/ellis.html

(These Data Visualizations created by D3.js)

All these cool and fancy interactive infographics were implemented by SVG.

I’ll try to dig more SVG, and my next design challenge will be Data Visualization.

List my currently studied SVG related books

  • SVG Essentials, by J. David Eisenberg & Amelia Bellamy-Royds.
  • SVG Animations, by Sarah Drasner. (I learned SVG Sequence Controlled Technique by CSS from this book.)
  • Interactive Data Visualization for the Web, by Scott Murray
Like what you read? Give Daniela Li a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.