Recently, a client of ours, Smart Focus, came to us looking for a fresh website design. Part of the work involved us creating animated icons to help explain their range of services. We knew that the animation would need to be scaled on various devices and run smoothly without fault. Creating this animation as a GIF file would have resulted in a huge file size and poor quality when scaling responsively. It became apparent that the SVG format was the way forward.
What is SVG?
Our SVG icons for Smart Focus.
Scaleable Vector Graphic; commonly known by its acronym and file suffix .svg is becoming very popular for producing animations. The main advantage to SVG is in, as the name suggests, it’s scalable, and a vector format. The files scale without loss of quality. GIFs and movie formats have to be optimised to roughly the size they are intended to be used, as they will look obviously pixilated when increased in size.
For a developer, basic animation functions (rotation, position, scale, style) can be called upon using CSS, SMIL and Javascript. For more complex animation it’s common to use external manipulation libraries in both JavaScript and CSS. Snap.svg is one of the most popular libraries.
But for someone like me (with an exceedingly limited knowledge of coding) it’s just too technical with no familiar user interface. My background in animation is using tools like Flash and After Effects.
So, what options are available for the ‘developly’ challenged?
So far, I’ve discovered three plugins, two for Adobe Animate and one for Adobe After Effects.
1. Animated SVG Exporter by Thomas Byrne for Adobe Animate.
Adapted from an original Flash file in Adobe Animate and exported using Animated SVG Exporter.
This is exceptionally useful for repurposing animations that were created using Flash. It creates a single .svg file without the need for any external files. Exporting a lengthy animation with lots of keyframes can take some time. To use it simply go to Window/Extensions/SVG Animation, it will output a single .svg file.
2. Snap.svg Animator by CJ Gammon for Adobe Animate.
This utilises the snap SVG javascript library. You can convert an existing animate file or have the option when creating a new document to choose a SnapSVGAnimator document. You have to ‘publish’ the file as you would normally do but the interface will now be specific to SnapSVGAnimator. It will output both a .html and a .json file. I’ve found it can be a bit buggy with objects not retaining their original positions and there’s no feedback when it’s publishing, you just have to wait, and wait until it looks like it's finished, then you can drop the HTML file into a browser and see if it works.
Both of those plugins are limited by Adobe Animate which doesn't have anywhere near the feature set as After Effects. I much prefer using the only plugin I’ve found for Adobe After Effects; the excellent ‘Bodymovin’.
3. Bodymovin by Herman Torrisi
Created using Adobe Illustrator, After Effects and exported using ‘Bodymovin’.
Bodymovin has its own set of library files, it will export as .json, .html, .svg and HTML5. Airbnb has used Bodymovin extensively and even developed a free add-on called Lottie which allows the exported JSON data to be used inside Android and iOS apps. Bodymovin is, in my opinion, the best option for Designers to create SVGs and animated HTML.
Apparently, it’s easy to integrate the library into a site and utilise other CSS and java commands to interact with it. As it uses After Effects many commonly used techniques such as trimming paths are supported. You also have the option when exporting to create a ‘demo’ HTML file which includes the code needed from the library so it’s quick and easier for designers to preview the output without having to do a single line of code.
Free online tools
There’s plenty of online tools available but all have varying limitations and confusing interfaces that still rely on you knowing some coding.
Svgator
For the most simple animations, there’s a free online tool called svgator which would be a very handy tool, however, it has a major flaw: you can’t change the origin point of translation. The ‘Anchor Point’ or ‘Axis Origin’ is the point from which things are scaled or rotated or moved. By default, the point will always be the object’s centre mass, but you can reposition it anywhere so it will rotate, scale or position (translate) from that new position.
Vivus-instant
Another great free tool for a certain type of illustration animation is vivus-instant - It does just one thing; animating stroked paths. This is something After Effects users know as ‘trimming paths’. It’s pretty much a one-trick pony, but what a trick! It doesn’t rely on external libraries and produces really small files. The only downside is that it will only animated stroked paths.
And finally, just a few notes on optimisation
Most designers will be using Adobe Illustrator to create their files. I’ve got a few tips to help make this a bit easier for you.
-
Whichever way your SVG is going to be animated, it’s good practice to name your elements and create a layer for each element you intend to be animated. This is common sense if using an application but also helpful if someone who knows about coding gets involved later. SVGs, when viewed as code, can look quite complex and having named elements makes it that much easier.
-
Save your layered file as an SVG using the default settings. Illustrator will create small enough files for most uses but when file size is a real premium and you have to squeeze out every last byte of data, there’s another great online tool called SVGOMG which is easy to use and you can tweak your files to produce the smallest possible files. I’ve found this tool particularly handy when producing SVGs used in HTML5 banner ads.
Further reading
-
svgjs - A lightweight library for manipulation of SVG.
-
Janvas - An online tool for creating SVG. Helpful for people without access to Adobe Illustrator
-
Anigen - Another online animation tool, seems quite basic
-
Vector Doodle Square - A simple SVG doodle maker, use this then try it in vivus-instant
-
Interesting Video and tips - for animating SVG with code by CSS-tricks
