DeveloperKit

SVG Optimizer

Clean up and minify SVG files: remove editor metadata, round numbers, and compress path data, with a before-and-after preview. Free, private, and 100% in your browser.

Original SVG

0 B

Optimized SVG

The optimized SVG appears here.

Optimizations

Preview (compare before and after)

No image
Original
No image
Optimized

Previews are shown as images, so scripts inside an SVG never run.

Optimize SVG Files Online

SVGs exported from Figma, Illustrator, Sketch, or Inkscape carry a lot of baggage: editor namespaces, layer names, hidden metadata, default values, and coordinates with six decimal places. None of it changes how the image looks, but all of it adds bytes to every page load.

Features

  • Removes editor leftovers

    Strips Illustrator, Inkscape, Sketch, and Figma namespaces, layer names, metadata, comments, and generator notes.

  • Smaller path data

    Rounds coordinates to your chosen precision and writes each path segment in its shorter absolute or relative form.

  • Safe by default

    Keeps everything that affects rendering: referenced gradients and clip paths, inherited styles, text whitespace, and the title for screen readers.

  • Before and after

    Compare the original and optimized images side by side and see the savings in bytes and gzipped size.

  • Ready to use

    Download the file, copy the markup, or copy it as a compact data URI or CSS background-image.

  • Private by design

    Files are optimized in your browser and never uploaded. Scripts are removed and previews never run them.

How to Optimize an SVG

  1. Paste SVG code, upload an .svg file, or drop it onto the editor.
  2. Review the optimizations and choose the number precision.
  3. Compare the original and optimized previews.
  4. Download the optimized file or copy it as markup, a data URI, or CSS.

Frequently Asked Questions

How much smaller will my SVG get?

Files exported from design tools often shrink by 30-70%, mostly from metadata and over-precise numbers. Hand-written or already optimized SVGs shrink less. The status bar shows the exact savings, including after gzip compression.

Will optimizing change how my SVG looks?

The default settings only apply changes that keep the rendering identical. Very low precision (0 or 1 decimals) can visibly change small icons, so compare the previews when you lower it. Most icons look identical at 2 or 3 decimals.

Why remove width and height?

Without fixed width and height, an SVG with a viewBox scales to the size of its container, which is what you usually want for responsive icons and illustrations. Keep them if the SVG must have an intrinsic size.

Is this the same as SVGO?

It follows the same ideas as SVGO, the standard Node.js optimizer, but runs entirely in your browser with a focused set of safe optimizations. Nothing is uploaded to a server.

Should I use a data URI or a file?

Data URIs avoid an extra request and work well for small icons in CSS. For larger images or icons used on many pages, a separate file is better because the browser can cache it.

Related Tools

  • Color Converter

    Convert any color between HEX, RGB, HSL, HWB, OKLCH, Lab, and CMYK, with shades, tints, and color harmonies.

  • Color Contrast Checker

    Check text and background colors against WCAG AA and AAA contrast rules, preview them, and get passing alternatives.

  • JSON Formatter

    Beautify, minify, and validate JSON instantly with exact line and column error reporting.

  • JSON Comparer

    Compare two JSON documents side by side and see every added, removed, and changed value.