SVG Path Optimization and Minification — Technical Guide

SVG Path Optimization and Minification — Technical Guide

SVG files are often larger than necessary. Path data—the d attribute—usually contains the most redundancy. This guide covers how to reduce SVG size without affecting rendering.

Path Command Basics

SVG paths use commands like:

• M (moveto), L (lineto), H (horizontal), V (vertical)
• C (cubic Bézier), Q (quadratic Bézier)
• Z (closepath)
• A (elliptical arc)

Uppercase = absolute coordinates; lowercase = relative.

Optimization Techniques

1. Prefer Relative Commands

Relative commands (l, h, v, c, q) reuse the last point. They often produce smaller output than absolute when there are many small steps.

Before (absolute):

M 10 10 L 20 10 L 30 10 L 40 10

After (relative):

M 10 10 h 10 h 10 h 10

Or collapsed:

M 10 10 h 30

2. Reduce Decimal Precision

Path data from design tools often has excess decimals. Rounding to 1–2 decimals usually has no visible impact:

C 12.345678 34.567890 56.789012 78.901234 90.123456 12.345678

→

C 12.35 34.57 56.79 78.9 90.12 12.35

Precision 2 is enough for most screens; precision 1 for small icons.

3. Remove Redundant Nodes

• Collinear points on straight segments can often be removed.
• Cubic/quadratic segments that approximate lines can sometimes be replaced with L.
• Zero-length segments (e.g. l 0 0) can be dropped.

4. Use Shorter Commands

• H x instead of L x y when y is unchanged.
• V y instead of L x y when x is unchanged.
• For horizontal/vertical runs, a single H or V with cumulative distance is smaller than many Ls.

5. Merge Adjacent Commands

Some parsers allow comma separation:

L 10 10 L 20 20  →  L 10 10 20 20

Not all tools support this; test in target browsers.

6. Remove Metadata and Comments

• Strip <metadata>, <title>, <desc> if not needed for accessibility.
• Remove XML comments <!-- -->.
• Remove id attributes that aren’t referenced (or keep only those that are).

SVGO (Node.js)

SVGO applies many of these optimizations automatically:

npm install -g svgo
svgo input.svg -o output.svg

Common plugins:

• removeDoctype, removeXMLProcInst
• removeComments, removeMetadata
• cleanupIDs (prefix/simplify ids to avoid collisions)
• convertPathData (relative commands, precision)
• mergePaths, convertShapeToPath
• removeViewBox (only if dimensions are set elsewhere; often keep viewBox)

Precision:

// svgo.config.js
module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          convertPathData: { floatPrecision: 2 }
        }
      }
    }
  ]
};

Manual vs Automated

• Automated (SVGO): Fast, repeatable, good for most SVGs.
• Manual: For critical icons or logos where a few extra bytes matter; also to fix odd results from auto-optimization.
• Design export: Configure Illustrator/Figma/Sketch to export with fewer decimals and without metadata when possible.

Before/After Example

Before (simplified):

<path d="M 0.000000 0.000000 L 100.000000 0.000000 L 100.000000 100.000000 L 0.000000 100.000000 Z"/>

After:

<path d="M0 0h100v100H0z"/>

• M 0 0 = start top-left
• h 100 = horizontal line right
• v 100 = vertical line down
• H 0 = horizontal back to left
• z = closepath

When Not to Over-Optimize

• Animations: Some optimizations can change structure and break SMIL or JS animations.
• Accessibility: Keep <title> / <desc> if they add useful context.
• Editability: Heavy optimization can make paths harder to edit by hand.

Conclusion

Optimize SVG paths by: using relative commands, reducing precision, removing redundant nodes, and stripping metadata. SVGO handles most cases; tune precision and plugins for your use case. For raster export, use an SVG to PNG or SVG to JPEG converter to get optimized PNG/JPEG output.

Convert SVG to raster: SVG to PNG | SVG to JPEG

Fri Mar 13 2026 00:00:00 GMT+0000 (Coordinated Universal Time)