What is the SVG Optimizer and what does it remove?

It is an in-browser SVG minifier that strips the XML prolog, doctype, comments, metadata, title and desc, and editor cruft from tools like Inkscape, Sodipodi, and Adobe, then collapses whitespace. You control each step with toggles.

How do I minify an SVG with this tool?

Paste your SVG markup into the input box, toggle the cleanups you want, then copy the optimized output. The byte count and percentage saved appear above the result so you can confirm the shrink.

Will optimizing change how my SVG looks?

No, the default settings only remove non-visual data and whitespace. Visual paths and shapes are preserved, so the rendered graphic stays identical.

Should I remove the width and height attributes?

Drop them only if your SVG has a viewBox. The viewBox keeps the graphic scalable, which is ideal for responsive and CSS-sized icons.

How is the SVG Optimizer different from SVGO?

It is a lightweight, dependency-free optimizer that covers the most common SVGO cleanups in the browser, without installing a build tool or Node setup.

Is my SVG uploaded anywhere?

No. The SVG Optimizer processes your markup locally in your browser, so your data never leaves your device and nothing is uploaded to a server.

SVG Optimizer

Minify SVG — strip comments, metadata and editor cruft, and collapse whitespace.

Your SVG is optimized locally in your browser and nothing is uploaded to a server.

Need to shrink raster images too? Try the Image Optimizer.

About SVG Optimizer

This SVG optimizer minifies SVG markup so your icons and graphics ship smaller and load faster. Paste an SVG exported from Figma, Illustrator, Inkscape, or Sketch and the tool strips the XML prolog, doctype, comments, metadata, and editor-specific cruft from Inkscape, Sodipodi, and Adobe, then collapses whitespace to shave bytes. You can optionally drop the root width and height attributes so the viewBox keeps the graphic fully scalable for responsive layouts. It is a handy, lightweight SVGO alternative for front-end developers, designers, and anyone who needs to minify SVG or inline icons into HTML, CSS, or React components. Everything is processed locally in your browser, and the tool reports the before and after byte count so you can see exactly how much smaller your file got.

Features

Strips XML prolog and DOCTYPE declarations that inline and web SVGs do not need
Removes comments to clean up exported markup
Deletes metadata, title, and desc elements that bloat file size
Cleans editor cruft from Inkscape, Sodipodi, and Adobe, including namespaced attributes
Optionally removes root width and height so the viewBox keeps the graphic scalable
Collapses whitespace and redundant spacing between tags
Shows the optimized byte count and percentage saved
Toggle each cleanup on or off so you keep exactly the markup you need

How to use the SVG Optimizer

Paste your SVG source into the input box.
Toggle the options for comments, metadata, editor data, dimensions, and whitespace to fit your needs.
Read the optimized output and the byte savings shown above it.
Copy the optimized SVG and drop it into your project.

Example

Input

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <!-- heart icon -->
  <title>heart</title>
  <path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/>
</svg>

Output

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/></svg>

Prolog, comment, and title removed with whitespace collapsed.

Common errors & troubleshooting

The graphic disappears or looks the wrong size after removing dimensions. — Removing width and height only works when the SVG has a viewBox. If it has no viewBox, keep the dimensions toggle off.
An ID or label referenced by your CSS or JavaScript got cleaned away. — The editor-data option removes data-name and namespaced editor attributes. Turn it off if your code depends on those hooks.
Accessibility breaks because the title and desc were stripped. — The metadata option removes title and desc elements. Disable it when you rely on them for screen-reader labels.
Output is empty after pasting. — The optimizer needs actual SVG markup; make sure you pasted the full svg element and not just a file path or a binary image.

Frequently asked questions

What is the SVG Optimizer and what does it remove?: It is an in-browser SVG minifier that strips the XML prolog, doctype, comments, metadata, title and desc, and editor cruft from tools like Inkscape, Sodipodi, and Adobe, then collapses whitespace. You control each step with toggles.
How do I minify an SVG with this tool?: Paste your SVG markup into the input box, toggle the cleanups you want, then copy the optimized output. The byte count and percentage saved appear above the result so you can confirm the shrink.
Will optimizing change how my SVG looks?: No, the default settings only remove non-visual data and whitespace. Visual paths and shapes are preserved, so the rendered graphic stays identical.
Should I remove the width and height attributes?: Drop them only if your SVG has a viewBox. The viewBox keeps the graphic scalable, which is ideal for responsive and CSS-sized icons.
How is the SVG Optimizer different from SVGO?: It is a lightweight, dependency-free optimizer that covers the most common SVGO cleanups in the browser, without installing a build tool or Node setup.
Is my SVG uploaded anywhere?: No. The SVG Optimizer processes your markup locally in your browser, so your data never leaves your device and nothing is uploaded to a server.

Related tools

CSS / SCSS Formatter — Beautify or minify CSS/SCSS/LESS, sort properties and remove duplicates.
HTML Formatter — Beautify or minify HTML, format inline CSS/JS, and preview the result.
XML Formatter — Beautify, minify and validate XML, and convert XML ↔ JSON.
JS / TS Formatter — Beautify or minify JavaScript, TypeScript and JSX/TSX with Prettier options.
Image Optimizer — Re-encode and shrink images (JPEG/WebP/PNG), optionally resizing.
Image Format Converter — Convert images between PNG, JPEG and WebP entirely in your browser.
Open Graph Generator — Generate Open Graph & Twitter meta tags with a live social-card preview.
Mermaid Diagram Renderer — Render Mermaid diagrams (flowcharts, sequence, gantt) to SVG in your browser.