SVG Optimizer
Make SVG files smaller without changing how they look. Paste SVG code or open a file, and the optimizer removes what design tools leave behind, such as metadata, comments, editor namespaces, hidden and empty elements and unused definitions, and rewrites path data, colours, numbers and IDs in their shortest form. Compare the result side by side before you download it.
- Runs in your browser
- No sign-up
- Free to use
How to use SVG Optimizer
- Paste SVG code or open an .svg file.
- Choose precision and options such as responsive or keep IDs.
- Click Optimize SVG and compare before and after.
- Copy or download the optimized SVG.
SVG Optimizer features
SVGO 4
The standard SVG optimizer, running in your browser.
Precision control
1 to 5 decimal places for coordinates.
Responsive
Remove width and height so the SVG scales with CSS.
Accessibility
Keeps <title> and <desc> by default.
Security
Removes scripts, event handlers and javascript: links.
Visual check
Before and after preview with file sizes.
When to use SVG Optimizer
- Shrinking icons and logos exported from Figma, Illustrator or Inkscape.
- Preparing SVGs for inline use in HTML.
- Cleaning SVGs from unknown sources before publishing.
- Reducing page weight for faster loading.
SVG Optimizer FAQ
How much smaller do SVGs get?
Exported files often shrink by 30 to 70 percent, mostly from removed metadata, rounded coordinates and shorter path commands.
Will the image change?
Not visibly at the default precision. Very small icons with fine details may need 4 or 5 decimals; compare the previews.
Why keep IDs?
If your CSS or JavaScript references IDs inside the SVG, or another file links to them, shortening IDs would break those references.
What does Prefix IDs do?
It adds a unique prefix to every ID, so several inline SVGs on one page cannot clash, for example two gradients both called a.
Is it safe to preview untrusted SVGs?
Yes. The previews use <img>, where SVG scripts never run, and the optimizer can strip scripts and event handlers from the output.
Is my file uploaded?
No. Optimization runs entirely in your browser.
Why and how SVGs are optimized
SVG is a text format, and the files exported by design tools contain a lot of text the browser does not need: XML declarations, generator comments, editor-specific namespaces and metadata, empty groups, default attribute values and coordinates with six or more decimal places. On a page with dozens of icons this adds up.
The optimizer uses SVGO, the open-source tool most build pipelines rely on. Its default preset removes unnecessary markup, merges and collapses groups, converts shapes and paths to their shortest equivalent, shortens colours such as #FFFFFF to #fff, rounds numbers to the chosen precision and replaces long IDs with short ones.
Options cover the common special cases. Responsive mode removes width and height so the SVG fills its container and can be sized with CSS; it keeps the viewBox, without which scaling would not work. Keep IDs protects references from outside the file, and Prefix IDs prevents clashes when several SVGs are inlined in one page.
Accessibility information is preserved by default: the <title> and <desc> elements give screen readers a name and description for meaningful graphics. Remove them only for decorative images that are hidden from assistive technology anyway.
SVG files can contain JavaScript. When you take SVGs from other people, the Remove scripts option deletes <script> elements, on… event attributes and javascript: links, and the previews always render through <img>, which never runs scripts or loads external resources.