Convert SVG to GIF

This is the thing to settle before you convert anything, and almost nothing that offers this conversion mentions it. GIF does have transparency, but only in one form: a single entry in the colour table can be marked invisible. The encoder used here never marks one. It builds a palette, writes it as a list of red-green-blue triples, and by the time the file is assembled there is nowhere for the alpha information to live.

A drawing rendered from an SVG has transparent pixels wherever nothing was drawn, so every one of them has to become something opaque before the palette is built. They are filled with the background colour set on this page, which starts at white. A logo drawn on nothing therefore arrives as a logo on a white card — invisible against a white page and perfectly visible against a dark one, which is the case worth checking before you send it anywhere.

The background colour picker on this page decides what the empty areas become, and it is read before anything else happens: the fill is painted onto the canvas first and the rendered drawing is composited onto it in one pass. That ordering is why the edges come out clean. Filling afterwards, or scaling a transparent render and then filling it, leaves a fringe of half-transparent pixels along every curve that the fill then darkens.

Match the value to whatever the GIF will sit on. If the destination is a white page, leave it alone. If it is a coloured panel and you know the hex value, type it in and the join disappears. If the destination is likely to change — a template that is white this year and dark the next — put a rectangle covering the whole viewBox into the drawing instead, so the file carries its own backing and does not depend on a setting made once.

An SVG has no size, so the conversion picks one: 1,024 pixels wide by default, with the height following the drawing’s proportions. That default suits PNG and WebP, where a large flat image costs little. It suits GIF badly, because the places that still ask for one — signature blocks, avatars, forum icons — are almost always working at 100 to 300 pixels.

Use the scale setting. At 0.2 the same drawing renders 205 pixels wide, which is closer to what these destinations display, and the file shrinks roughly with the area. Sending a 1,024-pixel GIF where 150 was wanted means somebody else’s software scales it down, usually badly and always without asking.

The reduction is less brutal than the number 256 suggests, at least on the kind of artwork that arrives as an SVG. Flat fills use one colour each, strokes use one more, and antialiasing adds a spread of intermediate shades along every edge — which on a two-colour drawing is a few dozen values in total.

On the test file the quantiser produced a palette small enough that the encoder wrote a colour table of sixteen entries, the smallest power of two that would hold it, and the whole 1024 by 1024 GIF came to 7,844 bytes from a 140-byte SVG. Flat artwork compresses extremely well in this format; GIF stores runs of identical indices, and a drawing is mostly runs.

Gradients are the case. A linear or radial fill across a large area generates hundreds of distinct values, and the palette cannot hold them, so the quantiser picks representatives and the result steps rather than blends. On a 1,024-pixel render those steps are wide enough to see clearly.

Soft drop shadows, blurred edges and semi-transparent overlays do the same thing, since each produces a range of blended values. If the drawing has any of these and the destination cannot be talked out of GIF, render smaller — fewer pixels means fewer distinct blends and less visible banding.

SVG can animate. It has SMIL elements, it responds to CSS animation, and a file can carry script. GIF can animate too, which makes it tempting to assume the two connect. They do not: the renderer produces one static frame at the drawing’s initial state, and the encoder writes exactly one frame into the file.

So an animated logo comes out as its first pose, and no setting changes that. Producing a moving GIF from a moving SVG is a different job entirely — it needs the animation played and captured frame by frame, which is not what a still-image renderer does.

GIF has been readable by everything since 1987, and that is the only property that matters to whoever wrote the requirement. Mail clients, forum engines, intranet portals and enterprise software written before the mid-2000s all read one, and the person specifying the format wanted an answer that could not fail on any of them.

Read the rest of that specification while you are there. A requirement old enough to name GIF usually also pins a maximum pixel size and a maximum byte count, and the format was rarely the only constraint. Getting all of them right in one attempt is faster than three rounds of rejection.

It is worth one attempt before accepting the compromise. A great many systems that say GIF in their help text accept PNG in their validation code, because the text was written earlier than the code and the code covers whatever the underlying library reads. If it goes through, the transparency survives exactly and the colour reduction never happens.

Where GIF is genuinely required, take it and choose the fill colour deliberately rather than accepting the default without looking. The result is then a flat-backed image that was decided rather than one that happened, and it will look the same to every recipient — which is what the requirement was trying to achieve in the first place.

Drop the folder. Each SVG is rendered at the same scale and encoded separately, with everything returned as a ZIP. The palette is built per image rather than across the set, so the same brand colour can land at a slightly different index in two files — invisible in use, and a reason not to expect the files to be byte-comparable.

Each file also keeps its own settings, so the background colour is chosen per row rather than once for the whole drop. For a set going into one template that means setting the same value on each of them, which is worth doing before you start rather than discovering it one signature at a time; the compensation is that a folder holding artwork for two different backgrounds does not have to be split into two passes.