SVG to Animated GIF
Animate an SVG and save it as a looping GIF for Discord, Slack, email signatures and social posts: choose the style, size, frame rate and background.
How it works
Upload an SVG
A logo, an icon, line art or a traced drawing. Every path and shape in it is animated; nothing is redrawn.
Choose how it moves
Draw on, fade, slide, bounce, blur, flip or pop in; or a loop for the whole artwork: pulse, spin, float, wiggle, heartbeat or a colour cycle. Set the length, the delay between shapes, and whether it repeats.
Change the colours
Every colour in the artwork is listed with a swatch: pick a new one for any of them, or put the whole design in one colour, and the animation plays in the new colours.
Download the SVG or a GIF
The SVG carries its animation as CSS, so it plays in a web page, an img tag or a slide with no script and no library. The GIF plays anywhere a picture does: Discord, Slack, email, social posts.
SVG to animated GIF, free
SVG to animated GIF: choose how the SVG moves, then download it as a looping GIF. SVG animation to GIF is the way to show an animated logo or icon where an SVG will not play: Discord, Slack, email and social apps. Already have an animated SVG? This page animates it fresh; for a still SVG as a still GIF use SVG to GIF.
Why it matters
Ends as it started
When the animation finishes the artwork is exactly the original: a stroke added so a filled logo could be drawn fades away as its fill arrives.
One file, no code
No JavaScript, no Lottie player, no GIF. A few hundred bytes of CSS inside the SVG, and it stays a sharp vector at any size.
Respects reduced motion
The file carries a reduced-motion rule: placed inline in a web page, it shows anyone who has asked their device for less motion the finished artwork straight away, as accessibility guidelines ask.
Questions
Will the animation play in an img tag?
Yes. CSS animation inside an SVG plays when the SVG is shown with an img tag, as a CSS background, or inline, in every current browser.
Why does my filled logo get an outline while it draws?
A fill has no line to draw. The tool gives each filled shape a temporary outline in its own colour, draws that, fades the fill in, and fades the outline out, so the final frame is your logo unchanged.
Can I change the colours of my SVG?
Yes. Each colour the artwork uses - fills, outlines and gradient stops - is listed under Colours with a swatch. Click one to choose a new colour, or use Everything in one colour to make it a single colour. The download, SVG or GIF, has the new colours; Original colours puts them back.
Can I make it loop?
Yes. Turn on Repeat and the animation plays forwards and back continuously; leave it off and it plays once and holds the finished artwork.
Does it work in email?
Most email apps block SVG altogether, animated or not. For email, use a PNG or GIF.