SVG Optimizer (SVGO)

Q: Why did my CSS stop working after optimizing?

SVGO shortens or removes unused IDs. Enable **Keep IDs** if your styles or scripts target them.

Optimize and minify SVG code with SVGO in your browser. Removes editor metadata, comments and redundant markup and shows the size saved with a preview.

Drop an SVG file here or click to choose one

You can also paste an image from the clipboard (Ctrl+V / ⌘V)

SVG code

Multiple passes (smaller output)Keep IDs (needed if CSS or scripts reference them)Replace width/height with viewBox (responsive)Pretty-print outputNumber precision (decimals)

Uses SVGO’s default preset, which keeps the viewBox, titles and accessibility descriptions.

Runs entirely in your browser. Your data is never uploaded.

What is SVG Optimizer?

The SVG Optimizer runs SVGO, the standard SVG optimization library, on your SVG code. It strips editor metadata, comments, hidden and empty elements, shortens path data, numbers and colors, and merges what can be merged. You get the optimized code, a before/after preview, and the size reduction.

How to use SVG Optimizer

Paste SVG code into SVG code, or drop/choose an .svg file.
Adjust options: Multiple passes, Number precision, Keep IDs, Replace width/height with viewBox, Pretty-print output.
Compare the before/after previews and the size badge.
Copy the optimized SVG or download it as name-min.svg.

Example

Input

100×100 SVG from an editor with an XML declaration, a comment, <metadata>, empty <defs> and a nested <g> around a rect (474 bytes)

Output

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10 10h80v80H10z" style="fill:red;stroke:none"/></svg>

When to use SVG Optimizer

Use it on icons, logos and illustrations exported from Figma, Illustrator, Inkscape or Sketch before shipping them on a website or app. Turn on Keep IDs if CSS, JavaScript or <use> references elsewhere depend on element IDs. Always check the preview: unusual SVGs with scripts or external references may need manual tweaks.

How SVG Optimizer works

The tool loads the browser build of SVGO 4 on demand and applies its preset-default plugins: removing the XML declaration, doctype, comments, metadata and editor namespaces, cleaning attributes and numeric values, converting shapes to paths, collapsing groups, rewriting path data and transforms, and more. SVGO 4’s default preset keeps the viewBox, <title> and non-editor <desc>, so scaling and accessibility are preserved. With multipass, the plugins repeat until the output stops shrinking.

Common Use Cases

Shrinking icons exported from design tools before adding them to a component library.
Cleaning up an SVG logo so it can be inlined in HTML.
Making SVG sprites smaller for faster page loads.
Removing editor metadata that leaks file paths or author names.

Security Note

Images are decoded, processed and encoded locally in your browser with the Canvas API. Nothing is uploaded to a server.

FAQs

Is SVGO optimization lossless?

With the default preset it is visually lossless in almost all cases. Lowering number precision too far (0–1 decimals) can shift small shapes, so compare the previews.

Why did my CSS stop working after optimizing?

SVGO shortens or removes unused IDs. Enable Keep IDs if your styles or scripts target them.

Does it remove the viewBox?

No. SVGO 4’s default preset keeps the viewBox. The optional Replace width/height with viewBox removes the fixed size instead, making the SVG responsive.