SVG Optimizer Online

Minify SVG by stripping comments, metadata, and editor cruft in your browser. Your files stay on your device.

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

Built and maintained by Udit Agarwal

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

  1. Paste your SVG source into the input box.
  2. Toggle the options for comments, metadata, editor data, dimensions, and whitespace to fit your needs.
  3. Read the optimized output and the byte savings shown above it.
  4. 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 JavaScript, TypeScript and JSX/TSX with Prettier options, or minify plain JavaScript.
  • 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.

Guides

More Code Formatters tools

  • MongoDB Query Beautifier — Beautify and indent MongoDB queries and find() statements in your browser.
  • MongoDB Aggregation Beautifier — Beautify and indent MongoDB aggregation pipelines in your browser.
  • MongoDB Explorer — Explore a MongoDB document or collection sample and infer its field schema and types.
  • OpenAPI / Swagger Formatter — Format and validate OpenAPI / Swagger specs (JSON or YAML) and count paths and operations.
  • CSS Unit Converter — Convert between px, rem, em, pt and % live with a configurable root font size.
  • Glob to Regex — Convert a glob or wildcard pattern into an equivalent JavaScript regex.
  • HTML to Markdown — Paste HTML and convert it to clean Markdown live, with GFM tables, lists and code blocks.
  • TOML Formatter & Converter — Format and validate TOML, and convert TOML ↔ JSON.
  • logfmt to JSON — Convert logfmt key=value logs to JSON and back.
  • dotenv to JSON — Convert a .env file to JSON and JSON back to .env, with quoting and comments handled.
  • CSV to Markdown Table — Convert CSV or TSV data into a Markdown table, with alignment and header options.
  • INI to JSON — Convert INI config files to JSON and JSON back to INI, with sections and comments.

See all Code Formatters tools (32) · All tools