Free SVG Optimizer — Compress and Minify SVG Online

What bloats SVG files

When designers export SVGs from tools like Figma, Adobe Illustrator, Inkscape or Sketch, the exported file often contains far more data than the browser needs to render the image. Common bloat includes:

• Editor metadata — Illustrator embeds its own XML namespaces, Inkscape adds inkscape: and sodipodi: attributes, Figma includes layer names and comments. None of this is visible in the browser.
• Inline styles — Editors often write every property as an inline style="…" attribute. SVGO converts these to presentation attributes that compress better.
• Unnecessary IDs — Auto-generated IDs like g123456 take space and can cause conflicts when multiple SVGs appear on the same page.
• Hidden elements — Guides, artboard markers and invisible layers are often exported even though they are never displayed.
• Redundant transforms — Nested translate(0,0) or identity matrices add bytes without changing anything.
• Overly precise numbers — Coordinates like 123.456789 can usually be rounded to 123.46 with no visible difference.

Safe vs aggressive optimization — when each applies

Safe mode only removes obvious non-rendering content: XML processing instructions, DOCTYPE declarations, editor comments and whitespace. It does not rename IDs, merge paths or modify any graphical element. Use this when the SVG will be embedded inline in HTML and you are worried about breaking CSS selectors or JavaScript that references specific element IDs.

Recommended (default) applies the full SVGO preset-default plugin set. It merges compatible path segments, removes empty groups, collapses redundant transforms, rounds coordinates and shortens colours. This is the right choice for the vast majority of SVG files — it reduces file size by 20–60% without any visible change.

Aggressive enables additional plugins including removeHiddenElems, convertShapeToPath, mergePaths and reusePaths. These can cut file size by another 5–20% but may restructure the SVG significantly. Use this for static decorative images where you do not need to target individual elements with CSS or JavaScript.

SVG optimization for web performance

Google's Core Web Vitals measure Largest Contentful Paint (LCP), which is directly affected by the size of resources above the fold. Unoptimized SVG logos exported from design tools routinely run 50–200 KB — 5–20× larger than they need to be. After optimization and gzip compression, the same logo might weigh 3–10 KB, shaving 50–100 ms off LCP on slow connections.

SVGs also contribute to Total Blocking Time when rendered inline. Excessive <path> elements mean more paint work for the browser. Aggressive optimization and path merging reduce the number of draw calls, improving rendering performance on mobile devices.

For icons displayed at small sizes (under 24 px), consider combining the optimized SVG with our Favicon Generator to create ICO and PNG fallbacks, and with SVG to Image to pre-render high-DPI PNG sprites for older browsers.

What SVGO removes and what it keeps

SVGO is the most widely used SVG optimizer and powers plugins in Webpack, Vite, Rollup, Gulp and many design tools. It works by applying a series of independent plugins in sequence. Each plugin performs one specific transformation, making the process transparent and configurable.

SVGO always preserves the visual appearance of the SVG (in Recommended mode). It keeps all visible shapes, fills, strokes, gradients, masks, clip-paths and text. It also preserves the viewport and aspect ratio. What it removes is the redundant, invisible or redundant markup that inflates the file without affecting what the user sees.

One thing to be aware of: SVGO may rename or remove IDs. If your SVG references specific element IDs in an external CSS file or JavaScript animation library, use Safe mode or configure cleanupIds: false to prevent renames.

Tips for best results

• Export from Figma or Illustrator with "Outline Text" enabled to avoid font dependencies, then optimize here.
• Run the optimizer after every export as part of your design workflow, not just before deployment.
• After optimization, check that gradients and masks still render correctly in the preview below.
• For animated SVGs (SMIL or CSS animations), use Safe mode to avoid removing elements that are invisible at rest but visible mid-animation.
• Combine SVG optimization with our Image Compressor workflow to ensure all assets on your page are as small as possible.