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:
(The examples here are GIF, not real SVG)
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.
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.
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.
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.
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.
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.
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,
(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