SVG Path Optimization: Reduce File Size Without Losing Quality

Path Optimization Techniques

SVG paths from design tools like Figma, Illustrator, or Inkscape often contain unnecessary precision and verbose commands. Optimizing them reduces file size significantly.

1. Reduce Decimal Precision

Design tools often export coordinates with 6+ decimal places. For most web icons, 1-2 decimal places are sufficient:

# Before (178 bytes):
M 50.000000,0.000000 C 77.614235,0.000000 100.000000,22.385765 100.000000,50.000000

# After (62 bytes):
M 50,0 C 77.6,0 100,22.4 100,50

2. Use Relative Commands

Relative commands (c instead of C) often produce smaller numbers:

# Absolute: M 200,300 L 250,300 L 250,350
# Relative: M 200,300 l 50,0 l 0,50

3. Use Shorthand Commands

Replace verbose commands with their shorthand equivalents:

Verbose	Shorthand	Savings
L x,y where y=prev_y	H x	1 number
L x,y where x=prev_x	V y	1 number
C with mirrored cp1	S	2 numbers
Q with reflected cp	T	2 numbers

4. Remove Redundant Points

Points that lie on the straight line between their neighbors can be removed. A L 50,50 L 60,60 L 70,70 can be simplified to L 70,70 since all points are collinear.

5. Combine Move + Line

If a path starts with M x1,y1 L x2,y2, the L is implicit — after an M, subsequent coordinate pairs are treated as L commands:

# Before: M 0,0 L 10,0 L 10,10
# After:  M 0,0 10,0 10,10

Tools

• SVGO: The standard Node.js SVG optimizer
• SVG Path Editor: Our tool helps you visually inspect and clean up paths
• Jake Archibald's SVGOMG: Web-based SVGO frontend