SVGO vs Manual SVG Optimization: When to Use Which

SVGO handles 90% of SVG optimization automatically. But there are cases where SVGO either can’t help or actively gets in the way. Understanding where the tool stops and human judgment starts will save you debugging time.

What SVGO does well

SVGO reliably handles:

• Removing editor metadata, XML declarations, and comments
• Collapsing empty groups and single-child wrappers
• Rounding coordinate precision
• Shortening color values (#000000 → #000)
• Removing redundant attributes and default values
• Merging adjacent paths with identical styles
• Converting shapes to shorter path notation

For a straightforward icon or logo, run SVGO with --multipass and you’re done. 70–80% reduction, no issues.

Where SVGO falls short

Embedded raster images

SVGs with <image href="data:image/png;base64,..."> have an embedded raster image. SVGO won’t extract or re-compress it. You need to:

1. Extract the base64 image, save it as a separate file
2. Replace the inline data URI with an external href
3. Optimize the raster image separately (with ImageOptim, Squoosh, etc.)

Or better: redesign the SVG to not include raster images at all.

Overly complex paths

SVGO optimizes the mathematical representation of paths but cannot reduce the fundamental complexity of an illustration. An illustration with 500 anchor points still has 500 anchor points after SVGO. To reduce this:

• Open in Figma or Illustrator and use “Simplify Path” or “Reduce Anchors”
• Trace the illustration at a lower fidelity level
• Consider whether a raster image would actually be smaller (see SVG vs PNG)

Preserving interactivity

If your SVG has JavaScript that targets specific elements by ID or class, SVGO’scleanupIds plugin may rename or remove those IDs. You need to configure SVGO to preserve them:

{
  name: 'preset-default',
  params: {
    overrides: {
      cleanupIds: {
        // Preserve these IDs from removal
        preserve: ['tooltip-trigger', 'zoom-area', 'animated-path'],
      },
    },
  },
}

Or disable cleanupIds entirely with cleanupIds: false and handle ID cleanup manually.

Animations (SMIL)

SVGO sometimes removes or modifies attributes that are referenced by SMIL<animate> elements. If your SVG has animations and they break after SVGO, check:

• Whether attributeName values still exist on the target element
• Whether referenced IDs were removed by cleanupIds
• Whether path merging changed path indices referenced by the animation

The safest approach for animated SVGs: disable the most aggressive plugins (path merging, group collapsing, cleanupIds) and only run the metadata-cleaning plugins.

Font-embedded SVGs

SVGs that embed fonts via <style> with @font-face need those styles to remain intact. SVGO’s inlineStyles plugin may cause issues here. Review the minifyStyles plugin output carefully.

When to optimize manually

Manual optimization is worth the effort when:

1. The SVG is performance-critical (hero illustration, LCP element) and you need every byte
2. The SVG has interactivity that SVGO breaks
3. The file contains embedded rasters that need to be externalized
4. The illustration has excessive path complexity that needs design-level simplification

A practical workflow

For most projects, a two-stage approach works well:

1. Run SVGO first. Handle 90% of savings automatically. Check the output renders correctly.
2. Manual review for critical files. For SVGs that are performance-critical or unusually large after SVGO, open the result in an editor and look for embedded images, unnecessary wrappers, or complexity that SVGO missed.

With this approach, you get automated efficiency without losing control over the edge cases.

For a deep dive on what SVGO does and how to configure it, see the complete SVGO guide. For a comparison of available tools, see the best SVG optimizer tools.