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.

Comments

  1. Interesting. By coincidence, I came across what might be a competing (complimentary?) format just a few hours ago. I was looking over the new features in TechSmith's Camtasia 2021 upgrade and saw that they now support importing "Lottie" animation files.
    "What's this then?" asked the voices in my head. I've only spent a little time looking over their site, but I will return when I have a bit more time. Lottie certainly appears to be playing in the same basic arena as SVGator.

    https://lottiefiles.com

    - Gary

    ReplyDelete
    Replies
    1. Thanks for sharing Gary. I feel like I've bumped into Lottiefiles before but never really looked into it. Does look like they're doing a similar thing to SVGator but they also have a marketplace with opportunities for creators to sell their animated graphics - which is interesting. Might even write a post about it.

      I think I prefer SVGator's concept of using SVG files since that is a cross platform file format already and the image still displays even if the animation javascript code doesn't run.

      Lottie appears to have its own file format (based around JSON code) which is now supported across various platforms (the Lottie format that is, I know JSON is widely supported) but it took a while to get there and support could be dropped in the future. SVG is a standard that has survived decades and is natively supported by most browsers.

      Delete

Post a Comment

This blog is monitored by a real human. Generic or unrelated spam comments with links to sites of dubious relativity may be DELETED.

I welcome, read, and respond to genuine comments relating to each post. If your comment isn't that save me some time by not posting it.

Popular posts from this blog

Inochi2D - Free Open Source 2D VTuber Avatar Rigging and Puppeteering Software (Part 1)

Inochi2D Creator - Free Open Source VTuber Software. If you've been looking for a way to live perform as a 2D cartoon avatar on camera, whether it be for a live stream or for pre-recorded content like educational videos, then VTuber software is a low cost (or even no cost) option worth looking into. In my previous post, How to Become a VTuber - 2D and 3D Software for Creating and Controlling Your Avatar , I took a brief look at the relatively new but completely free and open source Inochi2D  which I thought showed great potential for my own needs of creating a live performance character rig for my own TET Avatar that I use for all my promotional materials. While it is possible to live perform my character using Cartoon Animator itself, Reallusion's MotionLive2D capture system isn't great - with lip sync in particular. More importantly though, I can't exactly teach people how to use Cartoon Animator if I'm using Cartoon Animator to control my Avatar. What is Inochi2D

2D Animation Side Hustle - How to Package, Upload, Optimize, Price, and Promote Your Content in the Reallusion 2D Marketplace

T his is the final post in my four part, 2D Animation Side Hustle series on Selling in the Reallusion 2D Marketplace. I'll look at how to package up your content and upload it to the Marketplace, how to optimize your listings, price, and how to sell through your store backend as well as off site through social media and other channels. If you haven't read previous articles in the series click these links for Part 1 - Can You Make Real Money , Part 2 - Finding Niches , and Part 3 - What to Sell . Before getting started you'll need to register as a Content Developer in order to see the backend of your store on the Reallusion Marketplace . Packaging Content and Uploading to the Marketplace Since the release of Cartoon Animator 5 the software has a built in Package Manager that makes it easy to assemble and upload your Content to the Marketplace. Reallusion has a comprehensive, official video (embeded below) that quickly explains the entire process in less than seven minutes. 

Moho 14 Released - Still the Best 2D Animation Software for Indy Animators on a Budget

Moho 14 Released. Regular readers know I am a Reallusion, Cartoon Animator advocate through and through. Hands down I would recommend Cartoon Animator 5 first over Lost Marble's Moho 14 to anyone who is just starting in 2D animation, is a team of one, or just needs to animate as quickly as possible. However, feature for feature, Moho is, arguably, the best 2D animation software for the rest of us who can't justify a Toon Boom Harmony , or Adobe Creative Cloud subscription (and even with their applications Moho is very competitive on features). You can get started with Moho Debut for just USD$59.99 which is a cut down version of Moho Pro but it still has the most essential features needed for 2D animation. While Moho Pro is a whopping USD$399.99 (Cartoon Animator, which only has one version, is just USD$149.00) upgrades to new version numbers come down to a quarter of the price at USD$99.00. Even though Reallusion just released features like Motion Pilot Puppet Animation and

Wonder Unit Storyboarder - Free Storyboarding Software for People Who Can (or Can't) Draw

Wonder Unit Storyboarder.  As an independent and solo animator I'm always tempted to try and skip storyboarding my animated shorts because they're usually only single scene sketch comedy type jokes. As a result I have many unfinished projects that kind of petered out due to having no clear finishing line. Storyboarding your productions, no matter how small, gives you a step by step guide of every shot that needs to be completed (no planning shots as you animate). It also allows you to create an animatic that gives you a rough preview of the finished production. In short, you shouldn't skip storyboards as they, generally, increase the chance of the project being completed. Disclaimer - I'm Not a Fan of Storyboarder Upfront, Wonder Unit's Storyboarder  is not my preferred storyboarding software. However it's completely free, has a number of very compelling featu

The Ultimate Independent Animator's App and Resource List 2019-2023 - Animation and Video Life

Image created with Cartoon Animator 4. Being an independent animator is not like a studio animation job. There's so much more to do that is indirectly related to the actual task of animating. Over the years I've sought out many apps, tools, and services that can help me achieve that one single task, expressing myself through animation. Below is my Ultimate Independent Animator's Resource List for 2019-2022. It started out as a list of free or low cost apps that could help you in every stage of producing either 2D or 3D animation, and then just kind of grew from there. You may not have been looking for a Time Management App as much as you needed something to get you started in 3D animation but when those commissioned projects start coming in you'll have a head start on maximizing your time. All the apps and services on this list had to meet two main criteria: They had to be useful and relevant to an Indy Animator/artist. The base app/service had to be US$

Start Your 2D Animation Side Hustle - Sell Your Cartoon Animator Characters, Props, Scenes, and Motion Files in the Reallusion 2D/3D Marketplace

Have you thought about starting a side hustle selling your original Cartoon Animator assets in the Reallusion 2D/3D Marketplace ? In this article, the first in a series on selling in the marketplace, I'll give you an overview of what's involved, why you should give it some thought, and whether you can earn enough to quit your day job (or at least have a worthwhile side hustle). If you're an artist with any kind of drawing skills, and you're creating your own original characters, props, scenes, and even motion files for your Cartoon Animator projects, then setting up your own store in the Reallusion Marketplace should be a no brainer. You're making content already, it doesn't cost you anything to set up, and Reallusion only takes a 30% commission from each item sold. (If you think that's a lot, I'll address that further down). Don't be put off if you think your art skills aren't up to professional standards. There are plenty of artists with naïve

Prome AI Sketch Render Tool - Your Tradigital Clean Up and Colorist Artist for Character and Background Design

Random character head, Biro sketches drawn by TET (left). Render by PromeAI (right) using Prome's Sketch Render tool set to 'Comon:Cartoon, Render Mode: Outline'. W hile I don't do New Year Resolutions, one of my plans for the year ahead is to do more of my own art. Specifically character design drawn in an actual, physical sketchbook.  To that end, I have been spending the last half hour of most days drawing a page or two of random biro sketches in my sketchbook and posting the pages to my Instagram account  (this link will take you to one of my posts). These sketches are mostly practicing my skills because I don't really draw regularly anymore. Here is a tip, if you do this kind of sketching, and push yourself to keep doing it, you will see many drawings that could be taken further, even if you don't have anything they're suited for just at the moment. Which is where my second favorite AI Image Tool (after Leonardo.ai )  PromeAI comes into play. PromeAI