How to convert animated SVG to GIF
Recently I've been having some fun creating animated SVG icons to use as loading "spinners" for my side projects. My most recent one was a "coding" animation for my side project mydevportfol.io, a tool to help developers and programmers build awesome portfolios from their GitHub profile. Animated SVG doesn't have fantastic browser support, however, and what support it has is scheduled for deprecation sometime in the future. So, I've been looking into ways I can convert my animated SVG icons into animated GIFs. So far I haven't found a perfect solution, but let me share how I currently solve this problem.
Loading.io
Whenever I don't have time to create my own loading icon, I go to loading.io. It's a fantastic resource for finding and downloading free loading spinners in SVG and GIF format. Also, I'm glad they've recently brought out better icons for a premium price (it's still only $2 or so, but I'm glad they can make money from it at least).
loading.io also have a feature where you can upload your own animated SVG and turn it into a GIF. So far, it's been hit and miss for me. Sometimes it works out ok, and sometimes not. It can require tweaking with the speed settings etc, but I'm not sure exactly what the right formula is.
If this doesn't work, then I usually try screen recording...
Screen recording your SVG
The process is as so
- Open up the SVG in a browser, with the background set to the appropriate colour
- Record a specific part of your screen. I use Quicktime for this, it works quite well
- Upload the video to a conversion service such as ezgif. This can work ok, and is my current go-to if loading.io can't help me out.
Building my own tool
Please don't make me do this world. I've got enough things to procrastinate with as it is! That said, if I can't find a tool that works well enough, I might just have to make one myself. I've already looked into some JS libraries that could help...
I hope this helps some people, if it does, let me know in the comments or on twitter @cderm. Also, let me know if you've got any ideas yourself.