How to optimize SVG files

Why optimize SVG images?

SVGs are XML markup. Exports from design tools often include editor metadata, redundant attributes, over-precise path coordinates, unused definitions, and comments. None of that helps the browser render the graphic, but all of it adds bytes.

Smaller SVGs mean faster page loads, better Core Web Vitals, and lower bandwidth — especially on icon sets, logos, and illustrations shipped inline in HTML or CSS. A typical icon can shrink 30–70% without any visible change.

Quick start

1. Use the toolbar to Open SVG, paste markup, or try the demo.
2. Compare the optimized preview against the original (toggle Show original).
3. Adjust precision sliders if you need tighter or looser path rounding.
4. Download the result or copy the markup from the Markup tab.

Global settings explained

Compare gzipped

Shows gzip-compressed size alongside raw bytes. Useful when SVGs are served with compression — the number users actually download.

Prettify markup

Formats output with indentation. Helpful for debugging; turn off for smallest file size in production.

Multipass

Runs SVGO multiple times until no further savings are found. Slightly slower, sometimes meaningfully smaller output.

Number / transform precision

Controls how aggressively coordinates and transforms are rounded. Lower values = smaller files; too low can visibly distort complex paths.

Popular SVGO features

Each toggle in the Features panel maps to an SVGO plugin. Defaults are safe for most icons and illustrations. A few worth understanding:

• Remove doctype (removeDoctype)
• Remove XML instructions (removeXMLProcInst)
• Remove comments (removeComments)
• Remove <metadata> (removeMetadata)
• Remove xmlns (removeXMLNS)
• Remove editor data (removeEditorsNSData)
• Clean up attribute whitespace (cleanupAttrs)
• Merge styles (mergeStyles)
• Inline styles (inlineStyles)
• Minify styles (minifyStyles)
• Style to attributes (convertStyleToAttrs)
• Clean up IDs (cleanupIds)

Plugins like Remove viewBox and Remove raster images can break responsive or mixed SVG/PNG assets — disable them when output looks wrong, then re-enable one at a time to find the culprit.

Optimization topics

Browse topic guides that group related SVGO plugins — useful when you want to understand metadata cleanup, path rounding, or troubleshooting breaks:

• Remove metadata and editor noise
• Path and shape optimization
• IDs, defs, and references
• Styles and CSS in SVG
• Responsive SVG sizing
• Hidden and unused markup
• Attributes and namespaces
• Transforms that can break SVGs

When optimization breaks your SVG

SVGO is aggressive by design. Common gotchas: animations that rely on specific IDs, CSS that targets removed classes, SVGs that depend on viewBox for scaling, and filters or masks referenced by cleaned-up <defs> sections.

If something looks off, enable Show original, then disable plugins in groups (metadata cleanup, path rounding, ID cleanup) until the preview matches again. The last group you disabled contains the plugin that caused the regression. Start with the high-risk transforms topic guide.

SVG vs PNG vs WebP for icons

Use SVG for logos, UI icons, and simple illustrations that must stay sharp at any size. Use PNG or WebP for photos and complex raster art. For multi-color icons at a fixed size, a well-optimized PNG can sometimes beat SVG on bytes — but SVG wins for themeable, accessible, CSS-stylable graphics.

SVGO Plugin Guide

Every feature toggle on SVGOMG.net maps to an SVGO plugin. We publish a dedicated guide for each one with enable/disable advice and troubleshooting:

• Remove viewBox (removeViewBox)
• Clean up IDs (cleanupIds)
• Round/rewrite paths (convertPathData)
• Remove <metadata> (removeMetadata)
• Merge paths (mergePaths)
• Remove hidden elements (removeHiddenElems)
• Inline styles (inlineStyles)
• Prefer viewBox to width/height (removeDimensions)

Browse the SVGO Plugin Guide (44 plugins)