The world of online content animation has changed markedly over the years. Flash (and similar tech like Macromind Director) underpinned the beginnings of the modern Web, but when support for Flash was withdrawn, the SWF file format died. Fast forward to today with SVGator arriving on the scene. With SVG the modern vector format of choice, SVGator provides you with one of the best and easiest ways to animate the format. Let’s take a closer look at it in our review.
This is a sponsored article and was made possible by SVGator. The actual contents and opinions are the sole views of the author who maintains editorial independence even when a post is sponsored.
Online Animation Power
SVGator is an online SVG animation editor created with VueJS and designed to simplify the way you animate scalable vector graphics (or SVG). The stated aim of the company, based in San Fransisco, is to “make SVG animations achievable by even nontechnical users, thus encouraging the extensive use of SVG animations on the Web.”
Under normal circumstances, in order to animate SVG files, you may have to do some coding, perhaps in Javascript or Java, to manipulate the math defining the lines in an SVG file or move them around on a web page. SVGator has simplified all this by creating a web application with a timeline and keyframable tracks, meaning you can adjust the position of all the vector graphic elements in a scene and compile them into an embedded playable asset.
This gives you a file for use on web pages and mobile apps. The new mobile export options make this very easy, creating lightweight and scalable animations for mobile apps.
Nostalgic Vector Engine
All my talk about Flash just now is for a reason. To my eyes, SVGator looks and feels very much like that old vector animation workhorse. It is a keyframe vector animation tool that animates smooth lines instead of pixels. What this means is that your finished animations are scalable, able to be played back at any size without loss of quality.
Starting the software, you are faced with some demo scenes which will help you get into the workflow. The interface contains a playfield showing the animation you are creating, and below is a timeline which shows the progress of the objects on screen over time. To the left is a column of tools to manipulate the shapes on your screen and libraries of assets you’ve created.
You can import your own SVG files (created with any vector drawing program like Illustrator or Inkscape) or draw your own shapes from scratch.
Drawing in SVGator is the same as using any vector editor, bezier curves with handles that you can adjust to make perfect smooth curves. You can also change the line weight and color to suit your taste and the line quality, like dashes or dots. If you’ve used any vector program, it will be second nature.
This tool is an online web app, so there’s nothing to install. All the action takes place in a browser. This is amazing for productivity, as it means you can literally sit down in any browser on any computer anywhere in the world and continue your work as if you were sitting at your desk at home. It works on laptops and desktops, and although I haven’t tried it, I imagine you could even use it on a tablet.
Animating with SVGator is easy: draw shapes on a screen, set keyframes for those shapes, and move to the next keyframe. Adjust the shapes to their new form and set another keyframe. When you play the animation, the shapes animate smoothly from one position to the next.
Most importantly, this is not just a cut-and-paste animation library full of presets – it’s a proper professional piece of animation software. That’s not to say it doesn’t have some helpful tools to amplify your animation skills to new heights, however.
As you rise up the tiers in the payment plans, you get more actions to perform on your shapes. They call these actions “animators.” On the free level, you can position, scale, anchor and rotate your shapes and change their opacity. That’s basic animation. Up a level to the Lite tier, you can also morph, skew, fill and stroke, and these are all animatable settings. This adds more flexibility to your animations. Finally in the Pro tier, you can do everything mentioned so far and add interactive features to your animations, making it possible to do mouse operations on your animations to build interfaces or dynamic data visualizations and the like.
Also in the Pro tier, you have access to an asset library with graphic assets to give you a leg up in making your own animations with style and speed.
The only downside to the software I can see is that the free and lower tiers are limited in the kinds of operations you can do, but this isn’t necessarily a problem for two reasons. Firstly, you can do a LOT with basic operations and a bit of creativity, and secondly, the tiers are really not that pricey, considering what you get.
Levels of Access
SVGator is a terrific piece of software. I love how easy it is to get into, and doing simple things takes no time to become proficient. But there are also depths to it, so with a bit of training and practice, you can add to your skill set very quickly. That options for mobile export are a bonus on top of everything else. I love how it uses a paradigm I’m used to, the timeline, and the fact it looks and works so much like Flash, which I spent a long time using, is just a joy.
SVGator is not only powerful – it’s relatively affordable. There are a variety of plans once you decide to pay for your use of the software. First, there is the free plan, which lets you use the software forever but with a few limitations. While you discover how it works, you can do unlimited static graphic exports, up to three animation exports per calendar month and animation timelines with a duration of up to 10 seconds. The basic set of animation helpers are included.
Next is the so-called Lite tier, which for $11 per month ($132 billed yearly), allows you to export the product of the advanced animators, unlimited static exports, 10 animation exports a month, and animation durations up to one minute. You also have the Basic and Advanced animation helpers. Finally, there’s Pro, which at $19 per month (or $228 annually) gives you the whole deal, everything in Free and LITE, plus unlimited animation exports up to five minutes in duration, access to the assets library, all interactive options , and animation speed control and hyperlinks.
For full details of SVGator and to sign up for a free account, go to SVGator.
Our latest tutorials delivered straight to your inbox
