SVG to GIF Converter

Turn an SVG into a GIF: a still picture, or an animated GIF when your SVG moves. For an animated SVG, the tool reads how long the animation runs and draws it frame by frame at exact moments, for example 15 frames for every second, then puts the frames together into a GIF that loops. Because each frame is drawn paused at its own time, nothing is skipped and you do not wait for the animation to play. Animations written in the SVG itself (animate, animateTransform, set) and CSS keyframe animations are both captured. Choose the size, the number of colours (a GIF holds at most 256), and whether transparent areas stay transparent, with an edge colour for soft edges. Every GIF is read back from its own bytes, so the page shows its real size, frame count, colours and transparency. Convert one SVG or many into a ZIP. Nothing is uploaded and there is no sign-up.

100% private — everything runs in your browser. Everything runs in your browser; your files are never uploaded.

How to convert an SVG to GIF

1. Drop an SVG on the box, or several; paste SVG code, or click Try a sample.
2. If the SVG is animated, choose Animated GIF, the frames per second and the length; otherwise you get a still GIF.
3. Pick the size, the number of colours and the transparency settings.
4. Check the GIF and the read-back line under it, then download it or a ZIP of all of them.

What you can use it for

• Turn an animated SVG icon or loader into a GIF for an email or chat
• Make a GIF of an SVG logo for a place that does not accept SVG
• Share a CSS-animated SVG illustration as a looping GIF
• Make a small transparent GIF sticker from an SVG
• Export a still frame of an animated SVG at a chosen moment
• Convert a set of SVG icons to GIF in one go

Animated or still

Your SVG	What you get	Note
No animation	A still GIF (one frame)	Same as a PNG, but limited to 256 colours
SMIL animation (animate, animateTransform, animateMotion, set)	An animated GIF	Length read from the dur, begin and repeatCount values
CSS keyframe animation	An animated GIF	Length read from the animation duration and delay
Animation started by a click or hover	Shown at its start	The page tells you
Animation run by a script	Not captured	Scripts never run in an SVG picture

Each frame is drawn with every animation paused at that frame’s time, by shifting the animations’ start times. That is why every frame lands exactly on time, however slow or busy your device is.

Colours and transparency in a GIF

GIF rule	What the tool does
At most 256 colours in a colour table	Picks the colours that suit your SVG; you set the maximum
One colour can be marked transparent	Uses it for see-through areas
A pixel is either see-through or solid	Blends soft edges with your Edge colour
Frame delays are in hundredths of a second	Spreads the frames evenly over the length

The GIF89a format stores a colour table of up to 256 entries, an optional transparent index and a delay for each frame in hundredths of a second. Looping is not part of the format itself; the loop setting that every browser reads is an extra block, which the tool adds when Loop forever is ticked.

Frames per second and file size

Frames per second	Frames for 2 seconds	Delay per frame	Feel
10	20	0.10 s	Simple icons and loaders
15	30	0.06 to 0.07 s	Smooth for most animations
20	40	0.05 s	Smoother, bigger file
25	50	0.04 s	Smoothest offered, biggest file

A GIF stores each frame’s delay in whole hundredths of a second, so 15 frames per second alternates delays of 0.07 and 0.06 s; the total length stays exact.

Tips

• For a loader or icon, 10 to 15 frames per second and 16 to 64 colours keep the file small.
• Set the Edge colour to the background the GIF will sit on, so soft edges blend in.
• Outline any text in your SVG first so it looks the same everywhere.
• If your animation repeats, make the length one full cycle so the GIF loops without a jump.

Next steps: shrink the finished GIF with the GIF Compressor, or make GIFs from photos with the GIF Maker. Need a still image with full colour? Use SVG to PNG. To get frames back out of a GIF, use GIF to PNG.

Sources

Sources: W3C: GIF89a Specification; W3C SVG Integration (processing modes); W3C Scalable Vector Graphics (SVG) 2.

Frequently asked questions

Is this SVG to GIF converter free?

Yes. There is no sign-up, no watermark and no limit on how many SVGs you convert. Everything runs in your browser, so your SVG never leaves your device.

Does it make animated GIFs from animated SVGs?

Yes, for animations written into the SVG: animate, animateTransform, animateMotion and set elements, and CSS keyframe animations. The tool draws the SVG paused at each frame time and joins the frames into a GIF that loops forever, or plays once if you untick Loop forever.

Which animations are not captured?

Animations run by scripts, because a browser never runs scripts in an SVG used as a picture, and animations that start on a click or hover, which are shown at their starting point. The page tells you when your SVG has either.

How do I set the frame rate and length?

Pick 10, 15, 20 or 25 frames per second. The length starts at the time the tool reads from the SVG’s animations (one full cycle for a looping animation), and you can change it. More frames give smoother movement and a bigger file.

Is the background transparent?

Yes, by default. A GIF pixel is either fully see-through or solid, so soft, half-transparent edges are blended with the Edge colour: pick the colour of the page the GIF will sit on. Untick Keep transparent areas transparent to fill the whole background with a colour instead.

How many colours does the GIF have?

At most 256, the limit of the GIF format, chosen to suit your SVG. Lower it to 64, 16 or fewer for a smaller file; flat-colour icons often look identical with 16. The read-back line counts the colours actually used.

What size will the GIF be?

By default the same size as the SVG, worked out from its width and height or its viewBox. Choose 2× to 4× or type a width or height; the SVG is redrawn at that size, so edges stay sharp. GIFs here are limited to 2000 px on the long side.

Why does my text look different?

An SVG used as a picture cannot load fonts from other files, so text in a web font uses a fallback font. Outline the text in your vector editor, or embed the font in the SVG. The page warns you when this happens.

Is my SVG uploaded?

No. Reading the SVG, drawing the frames and writing the GIF and the ZIP all happen in your browser.