Skip to main content

SVGator - Cloud Based Vector Graphics Animation Creation Tool

SVGator is capable of some very advanced vector Animations. Spaceman Image.
SVGator is capable of very advanced 
vector images and animations.
Vector graphics are becoming increasingly more popular as more and more artists and designers become aware of their resolution independence. That is, you can scale a vector image to any size and it will retain its sharpness, never pixelate, and retain its file size.

SVG (scalable vector graphic) is a cross platform, standard vector file format that most modern web browsers are capable of displaying. If you want to get started in SVG graphics the free vector drawing app, Inkscape, saves images in this format natively (i.e. by default).

However, if you've wanted to create animated vector graphics with user interactivity (or even just animated only) for the web, the go to tool was Adobe Flash (which is now Animate CC), and not much else.

SVGator is changing all that with their cloud based, vector animation studio. Initially launched in 2017, SVGator evolved to version 2.0 in 2019 with a complete overhaul that is very impressive for just how easy it is to learn. Particularly if you're used to other animation software. 

You may be able to dive right in and figure all the basics out very quickly (as of writing this review I've literally only used SVGator for an afternoon and I was able to complete my logo animation without looking at a single tutorial).

SVGator's Animation Studio should be very familiar to anyone using other animation apps.
SVGator's Animation Studio should be very familiar to
anyone who has used other animation software.

SVGator has three plans, Free, Lite, and Pro. The free plan is free forever, and is what this review is based upon. While it is very limited compared to the paid options, you can still do quite a lot of cool motion graphics with the features available. Animations can be up to 10 seconds, download up to three animated projects every month, and download unlimited static vector images. Nothing is watermarked.

Also cool with the free plan is that you can import your own SVG images up to 7MB in size. Which is what I did once I'd finished playing around, learning the interface and what everything does.

As an illustration/graphic design tool I'd say SVGator's studio is fairly well featured, with most of the essential tools you'd need for creating web graphics. It's never going to compete with the likes of Adobe Illustrator but it doesn't need to, because its primary focus is web graphics, rather than being all purpose.

Transition Curves (Ease) which can be applied to key frames.
Transition Curves (Ease in/out) which
can be applied to key frames.
Where it really shines is with its animation tools, even on the free account, where you're limited to more basic animation of images such as, position/paths, scaling, rotation, opacity, and a few others. 

All of these things are easily key framed, on their own track, for each object in the timeline. As well you can apply transition curves (ease in/out)  to your key frames for smoother, more natural movement. 

When you're ready to export, animations can be saved in two SVG formats, CSS only, or Javascript.

Javascript is necessary if you want your animations to have interactivity such as playing when the mouse pointer is over them etc.

The only problem I encountered was the fact that places like Blogger, and various image libraries, won't let you upload SVG files at all (if anyone knows of an image hosting site that will let you upload and  embed SVG images on third party sites please let me know). I had to convert my Art Time Logo animation to a gif image so you could see it in action here (below). Which means SVGator is more useful for people hosting their own websites where they have full control over the file types they can upload and link to.

Art Time Productions Logo Animation.
Originally created with SVGator but converted to a GIF
in order to display it on Blogger.

My logo animation uses most of the animator options available to a free account and makes for a fairly cool, looping logo sting.

Interestingly, after I exported my animation I was able to open it in Inkscape and add the shaded rectangle background (you see above), save my work, and the file still retained all the Javascript animation.

Though be careful if you try this. Inkscape only displays the first frame of your animation with no way to step through to other frames. My logo animation, on the first frame, has all the opacity set to zero. When I opened it in Inkscape it, initially, looked like a blank file. However all the objects were still there, and the only way to see them on the first frame was to switch to 'Outline' display mode (see image below).

Exported animation reopened in Inkscape, display mode 'outline'.
Exported animation reopened in Inkscape, display mode set to 'outline'
because the opacity of all my objects is set to zero on the first frame.

I really enjoyed using SVGator because it was so easy for me to pick up and use. However, if you're new to this kind of tool, or just want some guidance, there are plenty of short video tutorials on the site that covers all the key features. It's even worth looking at the tutorial titles if you want a quick run down of just how powerful an animation tool SVGator is.

For example, if you've ever wanted to create Whiteboard Style animation, SVGator has option to animate strokes so that objects are drawn onto the screen.

I would like to see the option to export animations as GIF files, which I know would not work for animations with interactive elements, but it would open SVGator up to a wider range of uses (and would save me doing a lot of screen capture and file conversion just to put my animation here on Blogger). 

You could also export animations to GIF at any resolution, making it possible to simply make one animation and then export it at every size needed.

I do understand that GIF support kind of goes against SVGator's goal of encouraging the use of SVG files online but we're not there yet, and this is such a good animation tool, it may even become a 'go to' for GIF Animators.

Overall I'd definitely recommend SVGator. It's great that they have a free forever plan but the paid options are very affordable, and you'll no doubt want some of the features (and the download limits) they offer.

Popular posts from this blog

Can You Learn Reallusion's Cartoon Animator 5 for Free Using Their 137 Official YouTube Video Tutorials Sorted Into a Logical Learning Order?

Or you could just buy The Lazy Animator Beginner's Guide to Cartoon Animator . While Reallusion's Cartoon Animator is one of the easiest 2D animation studios to get up and running with quickly, learning it from all of the official, free, video tutorials can be more overwhelming than helpful. With more than 137 videos totaling more than 28 and a half hours of tutorials, spread across three generations of the software (Cartoon Animator 3 through 5) it's hard to know if what you're learning is a current or legacy feature that you either need to know or can be skipped. Many of the official tutorials only teach specific features of the software and don't relate at all to previous or later tutorials. As a result there are many features either not mentioned or are hard to find. To make your learning easier, on this page, I've collected together all of the essential, official, free video tutorials and sorted them into a learning order that makes sense. Simply start at

TimeBolt: Fast Video Editing for Anyone Creating Online Courses, Podcasts, or Vlogs.

I resisted making tutorial videos for a long time because I don't like editing. Specifically I don't like editing me teaching as I step students through a process during a screen record. I have a tendency to insert long pauses not just in the middle of sentences but between multiple words in the middle of sentences as my pace matches what I'm doing onscreen. This makes for very long and very slow paced video tutorials. To counteract this I have to edit out all the pauses. This can take hours, or even days on particularly long tutorials. For example, when I created my main course, The Lazy Animator Beginner's Guide to Cartoon Animator , I literally injured the thumb on my right hand, operating my mouse, as I spent weeks taking out all my pauses (seriously, I had to wear a thumb brace for a few weeks to fix the pain). Recently I came across TimeBolt , a very affordable, fast editing application with the featured purpose of removing all the pauses from your video (and even

Make Disney/Pixar Style Characters with Reallusion's Character Creator and Toon Figure Bases

The Extraordinary Tourist Classic Coat outfit created using Reallusion's Toon Designer for CC3. I've talked before how I've wanted to get into 3D Disney/Pixar style character animation since I first saw the animated cutscenes for the very first Tomb Raider game back in 1996. It's why I initially bought Reallusion's iClone 3D studio app as soon as I could afford a computer that would run it. But then Reallusion released their 3D Character Creator (CC) for iClone and I wanted to create my characters with that (and I did try with Bat Storm ). But the focus of CC was realism, even with ToKoMotion's stylised body morphs . Now with Reallusion's Cartoon Designer bundle for CC3 which features two packs, Toon Figures , and Toon Hair , designing Disney/Pixar style 3D characters just got a whole lot quicker. The two packs are the bare essentials for creating Toon style characters. Five body morphs (2 male, 2 female, and one adolescent body morph that w

AE Juice - Animation Presets, Motion Graphics, Templates, Transitions for After Effects, Premiere Pro, and Other Video Applications

Level up you video edits and animations with AE Juice's motion graphics and templates. Some days you just don't have the time to create flashy motion graphics for your latest video or animation. For some of us it's more a question of our own artistic abilities being a little less than the awesome we'd like them to be. Whatever reason a resource like AE Juice's animation presets, motion graphics, templates, and transitions packs for After Effects , Premiere Pro , and other video applications can really make your work stand out very quickly. AE Juice gives you access to an instant library of free, premade content elements and sound effects, which you can add to with additional purchases of various themed packs from their store. There are three ways to manage their content, all of which can be used in commercial projects . The AE Juice Standalone Package Manager makes it easy to browse previews of all your pack contents and to download and find just the elements yo

Review: Headshot Plugin for Reallusion's Character Creator 3

Headshot for CC3. Quite possibly the best 3D Avatar I've made of myself in any 3D application. Creating a realistic 3D human avatar is a whole lot easier with Reallusion's new Headshot Plugin for Character Creator 3. The plugin is an AI powered extension that can generate 3D digital humans from one photo. Which sounds like an amazing proposition but, in practice, if you're trying to achieve a specific likeness to an actual person, Headshot will give you an excellent base to work from. Headshot has two modes, Auto and Pro. Auto Mode Auto is well worth a try if you have an ideal photo of a front facing person that is properly lit and posed to Headshot's optimum requirements. It's also the only mode that will take a crack at generating a hair model. I grabbed an image of Harrison Ford, dragged it into Headshot without changing any of the default settings (other than specifying 'male' and selecting an 'old male' setting) and this is what I

KIT Scenarist - Free, Open Source, Screenwriting Software that Helps Research Your Ideas Too

KIT Scenarist Script Writing Software's Mascot, Alexander Cat. While you can write a script in any word processing app, if you're writing stories (screenplays) that feature characters and dialogue, a dedicated script writing app can save a lot of time formatting, letting you focus more on the actual story. Script writing apps are also very useful if you plan to send your screenplays out to production companies, or if you're collaborating with actors and other production people, who are used to scripts being in a particular standard format.  [Note: In case you're wondering there are reasons scripts follow a standard format and are always written in Courier (typewriter) font, including but not limited to; being easy to read by actors, plenty of space for notes, and the general rule that one page of a script (in this format) equals approximately one minute of screen time.] KIT Scenarist , in my opinion, is one of the best script writing apps out there for ease of use, simp

Reallusion Releases Cartoon Animator 5 - One Version, More Features, Lower Price!

If you're serious about producing 2D animation as quickly as possible, while still achieving professional results, Reallusion's Cartoon Animator 5 makes the most compelling case yet as your animation studio/tool of choice. Cartoon Animator's point of difference has always been its ease of use and accelerated workflow. Creating fast, 2D animation using puppet, bone rigged based characters and props, on a stage with 3D depth for easy scene parallax effects. As it has developed Reallusion has incorporated more advanced features like motion capture for both face and body as well as being able to export scenes to post production tools like After Effects with the addition of plugins. After moving away from Flash based vector image support for a few years, Reallusion is back with full .SVG (scalable vector graphics) support for resolution independent graphics. They've also added Spring Dynamic physics and Full Form Deformation tools, both of which make it ridiculously easy t