SVG Based Motion Graphics Software

The other week I was getting nostalgic about HTML image maps but these days they can have limitations compared to using SVG based images. The main issue with HTML image maps is that they are not responsive unless you implement a JQuery script such as JQuery RWD Image Maps by Matt Stow. SVG image maps are responsive without needing any Jquery as long as you follow a few rules.¹

SVG images look a lot crisper on large screens and links can be inserted easily into SVG graphics by using Inkscape.²

SVG can have smaller file sizes and there is the possibility to animate them with code. SVG animations have advantages over the .GIF format because they look crisper are smaller file size and are responsive. This is because SVG images are made of vector data which is not resolution dependant and can be written in XML code. Shapes are made out of coordinates. They can be inserted into HTML pages by using various methods.³

It is important to note however that they may not be fully supported in all web browsers but the Chromium based browsers do seem to support them very well. Pure CSS SVG animations don’t support as many of the animation features as ones that use Javascript.

During the research for this article I looked at some SVG images by opening them in a text editor instead of a graphics program. I also looked at raster images in my code editor and saw that was just code as well.⁴

This led me to look into software for creating SVG animation and HTML 5 interactive content since I don’t really fancy coding an SVG image or animation from scratch unless it is extremely basic.

I’d prefer to use software such as InkScape, Moho and Affinity Designer to design graphics for animations in a visual way. The vector animation software I’ve looked at usually comes with basic Illustration tools for making vectors and the ability to import images.

Clever people have been animating SVG for many years by writing code. Thankfully there is some specialised software to animate and export SVG for the web. Here are some software’s I researched for this article.

Software for Creating Animated SVG for the Web

I haven’t been sponsored or asked to write about any of this software free or commercial. I tried several of them out whenever possible and I’ve written some of my personal observations from a beginner to animation and motion graphics perspective. Sorry if I missed any out.

Commercial Software

SVG Gator

SVG Gator is a code free animation editor for motion artists and animators. There is a free option which is very limited. If you want all the features you have to pay by subscription. I tried the free account and I thought the UI was easy to understand and it even had a guided tour.

I couldn’t test any of the advanced features which included image import and most of the export formats. A lot of the more advanced animation options were disabled as well and the timeline was limited to 3 seconds.

It has basic vector creation and editing tools, transform tools, boolean functions, masking and gradients. There are lots of tutorials and good documentation for the program. They keep a nice blog highlighting features of the program, educational articles and case studies.

I liked that there was a way to create a path of motion and then set an object to follow it.

Their WordPress plugin is not available any more but they did write a guide on how to manually use SVG animations in WordPress which includes sanitising the code manually or using their online SVG converter for WordPress. You may benefit from optimising SVG animation code with SVGOMG before doing that as well to get the file size down.

Expressive Animator

Expressive Animator is a subscription based SVG animation software which also works offline once setup is completed. It can be used on Linux, Windows, macOS and ChromeOS.

The free trial lasts 7 days and the features are not limited during that time. I preferred the UI and way the timeline worked more than SVG Gator or any of the free software I tried. It feels like a stable well made vector animation program to me, I really liked it. It is intuitive and has all the features I need to do simple and possibly more complex SVG animations when I get the hang of it more. It imports SVG well and also supports raster image import which is nice.

Expressive Animator is primarily a vector based program with support for Figma, PDF and Adobe Illustrator import. It has basic vector editing and creation tools including boolean functions, masks and Clip Path, supports gradients, filters and effects, blend modes, grid, ruler and guides, timeline filtering and snapping options. It also has Text and typography tools, local fonts and font preview. I like how you can go into an SVG group in isolation mode to edit it easily as well.

Every time you move a shape on the timeline it creates a motion path which can be edited afterward.

Motion paths can be created from shapes for other shapes in your animation by right clicking on a path then selecting copy as > motion path keyframes and paste onto the shape you want to set to that motion path.

It has support for different easing curves as well.

I liked how it clipped the animations I made to the size of the document on export unlike SVG Gator which didn’t. There are several presets for document/art-board size and you can define your own. This is something I can’t do in Moho which is limited to video formats only.

I decided to buy it for the year while it was on sale at 70% off which I was happy to do as a hobbyist to animation and I couldn’t resist such an offer, but I think it is competitively priced and suitable for professional use.

Update, since writing this article the pricing on their website stays at $45/y of all yearly subscribers and $150/yr afterward. The monthly subscription price remains unchanged at $15/mo. Users who subscribed to the annual plan before the price change will receive the discount on their next invoice. I think that is pretty cool. I better get animating!

The program is very intuitive and I managed to make a few things just to test it quite fast. I was very impressed by the range of export options which include different SVG formats (SMIL which is an older version, CSS and JS), Lottie (JSON and dotlottie), Video, Image (APNG and GIF) and image sequence (SVG, PNG and JPEG).

The tutorials are easy to follow on their YouTube channel.

They are also working on their own vector editing software called Expressive Canvas.

Rive

Rive is an online based animation and interactive content tool aimed towards motion designers and video game UI developers. It is subscription based with several pricing tiers for professionals and companies but has a limited free option as well. Rive comes with very advanced animation features, even including skeletal rigging. It is definitely aimed toward the more advanced users and probably helps if you can code and handle working with nodes for the interactive features. It isn’t what I’m personally looking for. I don’t think it exports to animated SVG but it has lots of other options and includes game runtimes.

Cavalry

Cavalry is a 2D animation software, it is not web based it can be downloaded for Windows or Mac. It is a subscription based software but there is a free option. They also offer 70% off the professional version for students and teachers in further and higher education. It has SVG animation export for the free version. The free version is probably fine for hobbyists and for learning the software, the paid features are aimed toward more advanced professional users.

Free Software

Sozi

Sozi is a free, open source program for creating zooming SVG presentations with some interactivity. Not strictly an animation program but quite useful. SVG images can be imported into the program for creating clickable presentations. Animations can be exported as HTML or video formats. I thought it was easy and fast to get started with this program. If you are familiar with basic HTML coding you can also swap out the SVG image you start with if you want to create more animation or insert links for it in another program and the presentation animations will still work with it.

Enve

Enve is a free, open source SVG based animation program. It has not been updated for several years but I found a few tutorials on YouTube.

Friction Motion Graphics

If you are looking for a more developed version of Enve you may want to look at Friction Motion Graphics instead which is a fork of Enve in active development and nearing a stable version only last month. I tried the portable version of Friction for Windows for this article. It doesn’t have features for creating interactivity or HTML5 export but it does have basic CSS based SVG animation export. Not all of the animation features are supported yet in the SVG animation export but you can render animations to video or image sequences.

Friction supports multiple scenes and timelines, text and path effects and raster shader effects. When importing SVG you may have to look up how to do that with Inkscape to avoid compatibility issues. There are a few videos on YouTube which go through how to do this with Enve which would probably be applicable to this program as well as it has the same base features.

I thought the timeline in Friction was nice and it seems like a deceptively powerful program. It did crash or stop responding a few times while I was trying to figure things out, hopefully it will become more stable and I think it would be good if there was more documentation and beginner friendly video tutorials because I find the program a little intimidating and not as intuitive as I would like. I’d also like a light theme or something that looked a bit friendlier. Hopefully CSS SVG animation export will improve as well as it didn’t even support motion paths let alone gradients or any other effects even though those features are available in the program. A very promising project though, I will be keeping at least one eye on this one.

Synfig

Synfig is free and open source. I did try the portable version of Synfig but I couldn’t figure out how to use it as fast as the other programs I tried as it has more of a learning curve and the UI is quite different. Synfig has lots of features compared to some of the other open source software I’ve mentioned. It supports vector and bitmap graphics. Synfig has no SVG animation export but does support Lottie animation export. I preferred the UI for Friction Motion Graphics but Synfig might be great for people willing to give it a go, from looking at examples on the website it is possible to create full animations with it. It is still in active development the last update was only in May of this year.

Glaxnimate

Glaxnimate is a free, open source animation program for creating SVG and Lottie animations. It is still in quite an early stage of development, I found that the export or import to SVG didn’t work as well as other programs I tried. The editor was quite buggy and difficult to use, The timeline is too basic and hard to use because it doesn’t display key frames and isn’t easy to resize.

Glaxnimate comes bundled with Shotcut or can be downloaded off of Github and linked with Kdenlive to add animation to videos.

Vivus

Vivus is a free online only web app for creating very simple and easy CSS SVG draw animations from imported stroke based SVG graphics. Great for quick animations for the web.

Blender: Freestyle SVG Exporter

If you are into Blender and want to create simple 3D looking SVG animations you may want to check this out. The add-on can be activated in Blender without downloading it as it is included with default installations. It has documentation here.

For the results of the SVG animation renders I found there was a lot of flickering with fills, frame rates above 5 and for longer animations so it is very limited.⁵

Blender is not really suitable for creating SVG based animation but it does have powerful 2D and 3D animation tools.

SVG Flipbook

Another thing I wanted to find was a software that supported making SVG animations out of exported SVG image sequences.⁶ SVG Flipbook seems to do that but I’m not keen on the results.

You have to create your SVG file with numbered layers for every frame of the animation. I tried doing this with Affinity Designer but found it frustrating as it imports SVG as embedded files so I used InkScape instead to do that. It seemed to work but the process was a little time consuming and the result didn’t seem very responsive to the browser.⁷ In retrospect after writing this article and trying to solve this problem I realised that the easiest way would just be to export PNG image sequences out of Moho and then composite them in my video editor but a reliable and non-time consuming or code based web solution for this doesn’t seem to be around yet.

Edit 9th July: I figured out how to use the visibility bar in Expressive Animator to set when shapes show along the timeline. That is still quite time consuming if you have a lot of SVG sequence shapes to set but it works. You need to save all of your SVG image frames into an SVG file and put each frame into its own group. I used Inkscape with the Save as optimised SVG options to test this. On the options tab I disabled the collapse groups option and the create groups for similar attributes. On the IDs tab I disabled remove unused IDs so that groups preserved numbering on import.

Honourable Mentions

Wick Editor

The Wick Editor is a free, open source web based tool for creating animations and interactive content including simple games. It can export animated GIF, Video, HTML5 interactive content, PNG image sequences and still SVG images (not animated or interactive). It has frame by frame animation and tweening.

Trangram

Trangram is a free online based editor for making motion graphics without needing to use code. It works best on Chromium-based browsers. It is intuitive and easy to use and has lots of tutorials to follow. It even has a built in guided tour option to explain the interface. Might be a nice free way to learn how to do different animations and you don’t need an account to use it although it does have a sign up option if you want to share your projects with others.

It has vector creation tools, tweening, morphing animation, motion paths,

Something I did find out whilst trying the image import was that it can import animated SVG files and loads all the key-frames in as groups but not along the timeline. This also works for Expressive Animator, maybe it works for other programs too.

It doesn’t seem to support gradients on import but does support them in the program. You can export MP4 video, WebM (VP9), GIF, PNG, WebP and JPEG. No animated SVG or Lottie export though.

Graphite

Graphite is a free, open source web based vector drawing app. It is currently in Alpha stage and doesn’t include animation yet but they published a roadmap to version 1 which includes animation timeline features and SVG animation authorship. Maybe I’ll re-visit it one day.

Saola Animate

Saola Animate is an interactive HTML5 canvas editor with animation features. It has a one off perpetual license and workd offline for either Mac or Windows. It doesn’t do SVG animation export but the HTML5 Canvas features are impressive. They have some tutorials but they were all made around 5 years ago. The community seems very active however and they are good at supporting their customers from the look of things.

Moho

I wanted to mention Moho 14 for a few reasons even though it does not support animated SVG export. One of the useful features of Moho is that you can export animation frames as SVG images which may well come in handy for making SVG animations if I can figure out an easier way of making them from sequential images. The SVG Flipbook I mentioned earlier in this article does seem to work but some coding is needed to make it responsive. At present the easiest option for doing that for the web may be to compromise and make HTML5 presentations using Saola which supports sprite sheet import. Moho isn’t aimed toward web animation and doesn’t have a native SVG animation export. I plan to use Moho more with video compositing so that isn’t a problem.

Useful Resources

SVGOMG

SVGOMG is a website for optimising animated SVG for the web. A few settings I found useful to try on or off for some of the SVG’s I optimised were the “Remove viewBox” which I switched to off because I didn’t want that removed. I checked the “Prefer viewBox to width/height” on as well. Sometimes the “Move group attrs to elements” needed to be turned off or the SVG would not display properly.

Thanks for reading.