SVG Optimizer
Minify and optimize SVG files. Remove comments and unnecessary whitespace.
Note: This is a basic SVG optimizer that removes comments, whitespace, and empty attributes. For production use, consider using SVGO for more advanced optimization.
Optimize SVG files by removing comments, whitespace, and empty attributes. Reduce file size while maintaining visual quality. See optimization savings instantly.
SVG files exported from Figma, Illustrator, or Sketch carry baggage the image does not need: XML comments, generator metadata, multi-space indentation, line breaks between every tag, and attributes left with empty values. None of it renders, but all of it counts against file size, especially when the SVG is inlined into HTML or embedded in CSS where every byte ships to each visitor.
This optimizer applies a fast text-level cleanup: it strips comments, deletes the whitespace between tags, collapses repeated spaces, removes attributes with empty values, and trims padding inside style attributes. After the pass it shows the byte count before and after along with the percentage saved, and renders the optimized markup in a white preview panel so you can confirm the graphic still looks identical. From there, copy the markup to your clipboard or download it as optimized.svg.
It is deliberately a paste-and-go tool, not a build step. It does not rewrite path data, reduce decimal precision, merge shapes, or remove unused defs; for those structural optimizations, SVGO in a build pipeline is the right choice. For the common case, cleaning one exported icon before pasting it into a component or an email template, a text-level pass removes a meaningful slice of the file in under a second, with results you can verify by eye.
- 1
Paste your SVG
Paste the markup into the input field, or click Load Example to watch the optimizer work on a sample file first.
- 2
Optimize
Click Optimize SVG. Comments, inter-tag whitespace, repeated spaces, and empty attributes are removed from the markup in a single pass.
- 3
Verify and export
Check the rendered preview and the before and after byte counts, then copy the result or download it as optimized.svg.
Inline icons in HTML
Clean a Figma icon export before pasting it into a React component so comment and indentation bytes never ship to users.
Email templates
Shrink SVG graphics for HTML emails, where total message size determines whether Gmail clips the content.
CSS-embedded images
Minify an SVG before encoding it into a CSS background-image, where whitespace inflates the encoded string.
Quick size audits
Paste any SVG to see instantly how much of its size is comments and formatting versus actual drawing data.
What exactly does the optimizer remove?
XML comments, whitespace between tags, runs of multiple spaces, stray spaces inside tags, attributes with empty values, and extra padding in style attributes. It does not touch path coordinates, ids, or element structure.
Will the optimized SVG look different?
For typical icons and illustrations, no: comments and formatting whitespace have no visual effect, and the preview panel renders the result so you can compare. The one edge case is multiple intentional spaces inside a text element, which get collapsed to one.
How does this compare to SVGO?
SVGO parses the SVG into a tree and applies dozens of structural plugins: path precision reduction, shape merging, removing unused defs. This tool is a text-level cleanup meant for one-off pastes. For build pipelines and maximum compression, use SVGO.
Does my SVG code leave my machine?
No. The optimization is a series of string replacements executed by the page's own JavaScript. The markup never reaches a server, which also makes it safe for unreleased logos and confidential product assets.
How much smaller will my file get?
It depends on how the file was produced. Design-tool exports with heavy indentation and comments often shed a noticeable percentage, while hand-minified files shed little. The byte counts and savings percentage appear immediately after each run.