Skip to content

Alternatives and output size

We took 203 icons from a production set of 5,130 outline icons (every 25th one without filled paths) and ran them through every stroke-to-outline engine that could be scripted. Each result went through the same SVGO pass with 3 decimal places and was rasterized against the original:

engineavg bytes after SVGOavg curvesmean pixel mismatchwrong / failed
unstroke106121.90.000%0
unstroke, tolerance: 0.0295120.00.000%0
previous webfont pipeline (svg-path-outline + Paper reorient)134421.80.058%11
Skia PathOps (CanvasKit)172134.00.000%0
Paper.js booleans161017.70.000%0
svg-outline-stroke (rasterize + potrace)68516.03.960%202
FontForge (expand stroke + remove overlap)58913.10.244%17

FontForge produces the smallest files, but only because it's imprecise. Every icon is slightly off and some are broken (the bowl in soup is filled in). The previous webfont pipeline visibly deforms large arcs (magnetic, database-share) and leaves every subpath overlapping. Skia and Paper.js are accurate on this sample, but they keep every fragment their intersections produce, so their files are 50–60% larger.

unstroke gives the smallest output that is also pixel-accurate. Raising tolerance trades accuracy for size in a controlled way; 0.05 is already visible.

One note on svg-outline-stroke from npm: it doesn't outline at all. It rasterizes the SVG at its native size with sharp and traces the bitmap with potrace, so a 24 px icon comes back as a trace of a 24 by 24 pixel image, and every icon is visibly distorted. We didn't measure Inkscape's object-stroke-to-path.