GIF to SVG converter
Choose a GIF and get an SVG of vector shapes traced from it. A still GIF is traced whole; an animated GIF is traced from its first frame.
Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.
An animated GIF is traced from its first frame only.
How to convert a GIF to SVG
- Choose your GIF or drop it on the box.
- For a logo or icon in a few flat colours, pick colours and set the number to match. For line art or a silhouette, pick black and white.
- If the preview is peppered with dots, raise the smoothing and “Ignore specks under”.
- Download the SVG.
What a GIF holds
GIF dates from 1987, and it shows. Each frame can use at most 256 colours, chosen from a palette stored in the file, and every pixel is a number pointing into that palette. Within that limit nothing is lost: the pixel numbers are packed with LZW compression, which gives back exactly what went in. So a logo in a handful of flat colours is stored perfectly, and traces as cleanly as it would from a PNG.
Transparency in a GIF is one palette entry marked as see-through. A pixel is either fully there or fully absent; there are no soft, partly see-through edges. This tracer treats the see-through pixels as white paper.
Dithering, halos and other GIF habits
A photograph or a gradient has far more than 256 colours, so the program that made the GIF had to fake the missing ones by dithering: scattering pixels of two palette colours so that from a distance they blend. A tracer does not stand at a distance. It sees every scattered pixel as a tiny shape of its own. For a dithered GIF, trace in colours with a low count, four to six, and push the smoothing up so the scatter melts back into areas before the edges are found.
The second habit is the halo. Because GIF transparency is all or nothing, artwork made for a web page was often smoothed against that page’s background colour and then cut out, leaving a thin fringe of in-between pixels round every shape. Traced in colours, the fringe becomes a thin outline. Use one colour fewer, or black and white, and it folds into its neighbour.
The third is size. GIFs are mostly small, made for screens of their day: icons of 16 or 32 pixels, buttons, banners. A 32 pixel icon has very little edge to follow, and its trace will look like rounded pixels. There is no cure for that except a larger original.
Animated GIFs
An SVG from this page is a still drawing. When you choose an animated GIF, your browser hands over its first frame and that is what is traced; the other frames are not read. If the frame you want is a later one, save that frame as its own picture first, in an image editor or by pausing and taking a screenshot.
This page does not make an animated SVG from an animated GIF. Tracing every frame and playing the tracings in turn would give a file many times larger than the GIF that flickers at the edges, since each frame traces slightly differently.
Questions
Can I turn an animated GIF into an animated SVG here?
No. Only the first frame is traced, and the SVG does not move. Animation in SVG is made by moving vector shapes with CSS or SMIL, which is drawn by hand; it is not something a tracer can get from frames of pixels.
How many colours should I trace with?
As many as the artwork really has, and no more. Count the flat colours in the logo, including the background, and set that number. Extra colours get spent on the fringes between the real ones.
Why is there a white shape behind my GIF’s artwork?
In colour mode the see-through area counts as white, and the colour that covers the most area is written as a rectangle behind the rest. For a cut-out GIF that is usually this white. Delete the rectangle in a vector editor, or trace in black and white, where white is paper and is left out.
Does every browser open GIFs?
Yes. GIF has been readable by every web browser since the 1990s, so this page works wherever the rest of the site does.