DIAGRAM EDITION  the stages in plain languageReference edition →

Stage 13 of 14

Writing the document without losing what was already right

Every decision about the picture — the curves, the colours, what sits on top of what — has already been made by the time this stage runs. All that is left is turning that into the actual text of an SVG file, and it turns out that even this "just write it down" step can throw away real accuracy if it is careless.

Rounding a correct answer is still a way of getting it wrong

An SVG file stores every coordinate as plain text — a number with some digits after the decimal point. How many digits to keep looks like a housekeeping choice: fewer digits, a smaller file; more digits, a bigger one, with no real difference to the eye. For a long time this tracer kept one digit after the decimal point, rounding every coordinate to the nearest tenth of a pixel.

The curves themselves, by the time they reach this stage, are measured far more precisely than that — typically accurate to somewhere between one and six hundredths of a pixel. Rounding a number that precise down to the nearest tenth throws away real information the earlier stages worked hard to get right. It is the equivalent of carefully measuring a room to the nearest millimetre and then writing the result down rounded to the nearest centimetre, for no reason except habit.

The same curve, two ways of writing its numbers down Rounded to a tenth of a pixel — a staircase hiding under a smooth curve Rounded to a hundredth of a pixel — the curve keeps its shape Exaggerated here to make it visible. On a real drawing the effect is a softening of every curve and a slight blurring of every corner — small on any one shape, and it adds up.
Coarser rounding does not average out. It nudges every control point of every curve a little, and those nudges compound across a whole boundary.

The fix, tested rather than assumed, was to write two decimal places instead of one. Measured across the whole benchmark set — nearly a thousand icons, every visual style represented, held-out test images included — this single change improved the overall accuracy score by about seven percent, with every single family of icon improving and none getting worse. A third decimal place was tried too, and it barely moved the needle at all — which is exactly the sign that two decimals had already reached the real limit of how precisely the curves themselves are known. Writing finer than that is not honesty, it is padding.

A shorthand that has to be tested the way the reader will read it

SVG has a shorthand for a very common shape: two curves in a row that continue each other smoothly, the way a single flowing brushstroke does. Instead of writing all six numbers for the second curve, the file can write four, and let the reading program work out the other two by reflecting a point from the curve before it — the mirror image of a control handle across the join between the two curves.

Deciding when it is safe to use that shorthand sounds like simple arithmetic: check whether the reflected point matches the fitted one. But the check has to be done using the *rounded* numbers that will actually end up in the file, not the precise numbers the fitter produced internally. Rounding a number and then reflecting it does not always give the same answer as reflecting first and then rounding — the two operations do not commute, in the same way that rounding two prices to the nearest cent and adding them does not always match adding the exact prices and then rounding the total. A join that only becomes perfectly mirror-smooth after the numbers are rounded would be missed by a check done before rounding, and the shorthand would go unused for no good reason. Testing on the rounded numbers is what makes the shorthand trustworthy for whoever reads the file next — human or program, it is the rounded numbers they will actually see.

Drawing a word as one shape, not one shape per letter

A person drawing a wordmark by hand does not create a separate object for every letter, and a separate object again for every hole inside a letter like an "o" or an "a". They draw the whole thing as one compound shape, using the standard rule that a region enclosed an odd number of times is filled and one enclosed an even number of times is not — the same logic a hole-punch pattern follows.

Earlier, this tracer wrote one separate shape for every disconnected piece of a single colour, which meant a detailed wordmark could come out with three or four times as many shapes as the person who actually designed it used. Grouping every same-colour piece back into one compound shape — legitimate here because the pieces never overlap by construction — brought a set of twenty real brand logos from nearly twice the designer's own shape count down to about three-quarters of it, with the only visible change being the disappearance of faint seams that used to sit between neighbouring pieces of identical colour. Fewer shapes, and a slightly cleaner picture, from the same underlying geometry.

This only ever merges shapes of the exact same flat colour and the exact same transparency. A shape with its own gradient, or a shape drawn as a plain circle or rectangle element, always keeps its own place in the file.

The last few knobs: minifying, dropping the background, resizing the canvas

A few finishing options are entirely optional and change only how the file is written, never the picture itself. One strips every internal label and every trailing zero from the numbers, shrinking the file by roughly a tenth with no visual change at all — useful once a file is finished and no longer being read by a person. Another can drop the single shape that simply paints the whole canvas one flat colour underneath everything else, so the artwork sits on a transparent background instead — handy for placing a logo over something else. A third can grow the canvas by a margin on every side, giving a tightly-cropped shape some breathing room without moving a single coordinate of the artwork itself.