SVG Optimizer

SVG files exported from design tools like Illustrator, Inkscape, Figma, or Sketch are usually loaded with extra junk: XML declarations, comments, editor metadata, hidden namespaces, and generous whitespace. None of that affects how the graphic looks, but it bloats the file and clutters your markup.

ToolHub SVG Optimizer strips that overhead out with safe, predictable rules. It removes comments, the <?xml ?> prolog, DOCTYPE, <metadata> blocks, editor-only namespaces and attributes, and collapses runs of whitespace. Your shapes, paths, and styling stay exactly as they were. Everything happens in your browser.

1. 1

   Paste your SVG markup

   Drop the contents of your .svg file into the input panel. The optimized version appears on the right as you type.
2. 2

   Choose whether to keep title and desc

   By default these are removed to save bytes. If your icon needs an accessible name for screen readers, tick the checkbox to keep the title and desc elements.
3. 3

   Check the preview and savings

   A live preview renders the optimized SVG so you can confirm it still looks right, and the byte counter shows how much smaller it got.
4. 4

   Copy the result

   Click copy to grab the clean markup and drop it into your project, stylesheet, or component.

The optimizer only touches things that are safe to delete. It never rewrites path data, rounds coordinates, or merges shapes, so there is no risk of subtly distorting the artwork.

Editor metadata and namespaces

Design tools embed their own data using namespaces like inkscape: and sodipodi:, plus <metadata> blocks holding RDF licensing info. Browsers ignore all of it. Removing these attributes and their xmlns declarations often cuts the largest chunk of size.

Comments, prolog, and DOCTYPE

The <?xml version ?> declaration and any <!DOCTYPE> are not needed when an SVG is inlined in HTML or served as a modern asset. Comments are stripped too, since they carry no rendering meaning.

Whitespace

Indentation and line breaks between tags make hand-written SVG readable but add bytes. The optimizer collapses whitespace between and inside tags into single spaces, then trims the result.

• Keep title and desc when an SVG conveys meaning to users, so screen readers can announce it.
• Optimize after exporting, not before. Design tools may re-add metadata every time you save.
• For data URIs, optimize first then encode. A smaller SVG produces a shorter URI.
• Always glance at the live preview after optimizing to confirm nothing visual changed.
• Run optimization as a build step for large icon sets so every asset stays consistent.

Will this break my SVG?

No. The optimizer uses conservative rules that only delete editor metadata, comments, declarations, and whitespace. It never alters path data or geometry, and the live preview lets you verify the result before you use it.

Should I remove the title and desc elements?

It depends on the role of the graphic. Decorative icons can drop them to save bytes. Meaningful images that users rely on should keep a title so assistive technology can describe them. Use the checkbox to choose.

Does it minify path data or round numbers?

No. Rounding coordinates and rewriting paths can change how a shape renders, so this tool deliberately leaves geometry untouched. It focuses on the safe wins that never risk corruption.

Can I optimize an entire .svg file?

Yes. Open the file in any text editor, copy all of its contents, and paste it into the input. Then copy the optimized markup back into a new file.