Why your SVG is 40 KB and how to get it to 4 KB
A 40 KB icon is almost never 40 KB of shape. It's editor metadata, a namespace declaration for software you don't run, and coordinates carried to fourteen decimal places. Here is where the bytes actually go, in the order worth attacking them.
1. Editor metadata
Inkscape writes a <sodipodi:namedview> element recording your zoom level and window position. Illustrator writes an RDF block naming the file and the application version. None of it renders. On small icons this alone is routinely half the file.
<metadata id="metadata7"> <rdf:RDF>… <!-- 900 bytes of nothing --> </rdf:RDF> </metadata>
Safe to delete outright. Keep <title> — that one is an accessibility feature, not metadata.
2. Coordinate precision
M 12.000000000000002 4.9999999999999 is thirty-eight characters describing a point that renders identically to M 12 5. Rounding path data to two decimals is invisible at any realistic display size and typically removes 30–50% of a path-heavy file.
The rule of thumb: precision needs to survive your largest render, not your coordinate system. An icon drawn on a 24-unit grid and displayed at 96px needs one decimal place. Two is already generous.
3. Wrapper groups and generated ids
Design tools mirror their own layer panel into the markup: a <g> per artboard, per layer, per boolean operation, each with an id="Group-12-Copy". A group carrying no attributes has no effect on rendering and can be unwrapped into its parent.
Ids are only removable when nothing references them. Check for url(#id), href="#id" and animation begin="id.click" before stripping — a gradient whose id disappears takes the fill with it.
4. Path data itself
Once the metadata is gone, the d attribute is the file. Path syntax has several forms of shorthand that most exporters ignore, and they compound.
- Horizontal and vertical shortcuts.
L 20 10from a point already aty=10isH 20. Axis-aligned shapes — which is most interface iconography — are full of these. - Repeated commands can drop the letter.
L 1 1 L 2 2 L 3 3isL 1 1 2 2 3 3. The command stays in effect until a different one appears. - Relative commands are usually shorter. A lowercase
l 4 0beatsL 148 92whenever the shape sits far from the origin, because the numbers are deltas rather than absolute positions. - Leading zeros and separators are optional.
0.5is.5, and-.5needs no comma before it — the minus sign is its own delimiter.
<!-- exported --> d="M 10.0 10.0 L 20.0 10.0 L 20.0 20.0 Z" <!-- identical rendering, 40% fewer bytes --> d="M10 10H20V20Z"
This is mechanical and not worth doing by hand — but it is worth knowing it exists, because it explains why two optimizers can report very different results on the same file.
5. Measure gzipped, not raw
Every server worth using serves SVG with gzip or brotli, so the raw byte count is not the number your visitors pay. Compression changes which passes are worth running, sometimes dramatically.
SVG compresses extremely well, because it is repetitive text: the same attribute names, the same command letters, the same indentation, over and over. That means stripping whitespace and shortening ids barely helps — those are exactly the patterns the compressor already collapses to near nothing.
Coordinate precision is the opposite. Long decimal tails are close to random, and random data does not compress. Rounding them removes bytes that survive compression, which is why it is reliably the biggest real-world win on a path-heavy file.
# what your users actually download
gzip -9 -c icon.svg | wc -cA file that goes 40 KB → 12 KB raw might only go 9 KB → 4 KB gzipped. Both numbers are real; only the second one is a page-load improvement. The Optimizer reports raw bytes, so treat its figure as an upper bound on what you have saved.
6. What not to strip
Aggressive optimizers break files. These four are worth protecting:
viewBox— remove it and the SVG stops scaling. See viewBox, width, height.<title>andaria-label— screen readers use them.xmlns— required whenever the file is loaded as a standalone document rather than inlined.- Referenced ids, per the section above.
Everything described here is what the Optimizer does, with each pass individually switchable so you can see which one moved the number.
7. What each pass is actually worth
The passes are not equal, and the ranking is stable enough to plan around. Rough proportions for a logo or illustration exported from a desktop editor — your file will differ, but the ordering rarely does:
- Metadata and editor attributes — often 20–40% of the file. The single largest win on anything exported from Inkscape or Illustrator, and completely lossless. Always run it first, because it also makes the remaining markup readable enough to reason about.
- Coordinate precision — 30–50% of what remains on path-heavy artwork, and close to nothing on a file of rectangles. This is the pass whose savings survive gzip, so it matters more than its raw number suggests.
- Path shorthand — 10–20%. Consistent, mechanical, and invisible.
- Groups and unreferenced ids — usually under 5%. Worth doing for legibility more than for bytes; a file with fifty nested single-child groups is painful to edit by hand.
- Whitespace and indentation — negligible after compression. Minify if you like, but do not count it as a saving.
Two practical consequences. First, if metadata removal alone does not move your file much, it was probably not exported from a desktop editor and your weight is genuine geometry — look at precision and at whether the artwork has more detail than its display size can show. Second, there is a floor: a complex illustration is complex, and past a point the honest answer is to simplify the drawing or serve a raster PNG at the sizes you actually need.