Jimmy Lollipop

Using SVGator to create animated SVG

Clément Jacquelin - Author
Clément Jacquelin

Today, let’s talk about my experience using SVGator to create an animated SVG, and why you should give it a try.

Everybody loves a well designed interface with smooth transitions. It’s such a pleasure to be awed by some well crafted animations. What about thoses which are done to perfection? They’re flirting with invisibility. It’s one of the most essential part of user interface design, and if you want to start somewhere, you should take a look at the Twelve basic principles of animations. Let’s get back to our business (I’m calling « our » because I don’t want to feel alone writing this post, so now you’re part of the process, welcome aboard), and talk about svgs.

It’s such a pleasure to be awed by some well crafted animations. What about thoses which are done to perfection? They flirt with invisibility.

Animations are everywhere. When you unlock your smartphone, when your computer wakes up, when you scroll trought your favorite Pinterest board. Even right now, while you’re reading this blog post. Do you notice that, on the right corner of your screen, the scrollbar is giving you key informations about your navigation, simply by an up and down movement?

I’ve tried a lot of tools and tutorials to create custom loader, beautiful animated illustrations or smooth icon transitions. I ask you to not judge, but my Google history has seen the worst during this hard time:

  • Create gif with Photoshop
  • How to use the gif feature of procreate
  • Animation plugin for Sketch
  • Make svg animation with Figma

I’ve been trought false free trials, painfull softwares installation, overpriced tools, white elephant services… and finally, I’ve discovered during the year 2021 the chosen one: SVGator. Yep, I wish this post was sponsored, but unfortunately, it’s not.

And here is what I’ve done with the lovely Jimmylollipop’s logo and SVGator in less than a day. Without tutorials, without help, being forced to MacGyver.

Wonderfull, isn’t it? Anyway, I’m so proud of it. The animation contains scale, rotation, path morphing, mask, smooth transition (I love the ease-in-out one) and so much more. But here comes the better part: this is a full animated SVG. Because it’s all about what SVGator is: animated svg.

I just had to copy paste the code given by SVGator and… voilà. 🎉

This one is purely decorative, we just wanted to give our website a retro style, and the logotype is a big part of our identity.

The advantage of SVG Animated compared to Gif

  • Image quality: you already know it, .svg is the best format if you’re searching for high quality on every device, no matter the size
  • Image size: .svg animated is much more lighter than .gif, I’ve seen the same animation going from 110ko in .svg to 8.9Mo in .gif. It’s like 7990% bigger. I mean, that doesn’t apply to every animation, but you got it.
  • Editing: Give me your file, and I can edit it easily, changing the color, stroke, opacity. If you’re taking a look on the deep dark, it’s *just 😈* some javascript.
  • Interactivity: You can add a lot of event to your .svg, because it can be handled with code.
  • Responsive Design: As I just told you, your animation is controlled with code, so you can do a lot of thing that you won’t with a .gif

I could spend a lot of time writing about all the advantages for animated SVG, but the work is already done (better than me, I swear) by Sara.

My experience using SVGator

To be honest, I felt at home. The interface is clean (also clear), and well organized. The timeline, as the main component of the page, is at its place on the bottom of the screen, just where you expect it to be. You have the possibility to edit the properties of your shape thanks to the right panel: position, opacity, transform, anchor, alignement, and much more. It’s all here. On the left stand, you can already find the layer’s panel. And, spoiler alert, on the top side, you can switch between feature like node tool, pen tool, shape creation… Should I give you more, or are you realizing that you already know each part of the interface before seeing it?

To be honest, I felt at home.

Everytime I try a new tool, I know in less than five minutes if I’ll love it or no. And this one was a love at first sight. It doesn’t feel complexe. It’s smooth. Clean. I’ve launch animated svg in production with it. This is a way to measure the success of a tool for me. I have saved a lot of time, my application efficiency improves, and the developers have more flexibility, everyone is happy.

The final word: try it and you will love making animated svg

I’ve made many svg animated from the simplest custom loader to the complexe loop with multiple transitions. It was such a pleasure to work with this tool. The support is so friendly & fast on Twitter and by email, thats why I don’t need any reason else to recommand SVGator.

I would love to ear your feedbacks & experiences about this one. Your voice matters to me. Join me on Twitter, and let’s discuss. ❤️