Popular
Image Compressor
Shrink JPG, PNG, WebP or SVG in this tab, lossless or at the quality you pick.
How it works
SVG Optimizer
Make SVG icons and illustrations smaller and cleaner. Paste code or drop a file, choose how much precision to keep, compare the original and optimized versions side by side, and copy the result.
Paste or type to begin. Everything runs in your browser.
Preview
Compare the two previews. If anything looks different, raise the decimal places or turn on Keep IDs (CSS or scripts may target them).
- 01
Paste SVG code, upload an .svg file or drop one onto the input. Try the sample to see the difference.
- 02
Pick how many decimal places to keep and any options, such as removing width and height for responsive SVGs.
- 03
Compare the original and optimized previews, and raise the precision if anything shifts.
- 04
Copy the optimized code, download it, or copy it as a data URI for CSS.
About this tool
Why SVGs from design tools are bigger than they need to be
Design apps save SVGs with a lot that browsers don't need: editor namespaces and metadata, comments, hidden layers, default attribute values, inline styles that could be attributes, and coordinates with six or more decimal places. On an icon that's often more than half the file. Removing it makes pages lighter and the code far easier to read and edit by hand.
This tool uses SVGO, the optimizer behind most build pipelines, with its default preset. It keeps the viewBox, so icons still scale, and keeps <title> for screen readers unless you choose to remove it. The biggest single saving is usually precision: 2 or 3 decimal places is invisible for most icons, while very small or very detailed artwork may need more. Always compare the previews before you ship.
SVGO, in your browser
The same optimizer most build tools use. Files never leave your device.
Side-by-side preview
Original and optimized rendered next to each other, on light or dark, with raw and gzipped sizes.
Safe defaults
Keeps viewBox and accessible titles; options for responsive sizing, IDs and pretty output.
Data URI for CSS
Copy a compact, URL-safe data URI for background-image, usually smaller than base64.
FAQ
Frequently asked questions
Will optimizing change how my SVG looks?
Usually not. With 3 decimal places, the default, changes are invisible for typical icons and illustrations. Lower precision is smaller but can shift tiny details; the preview shows both versions so you can check.
Why keep IDs?
IDs are shortened or removed by default. If CSS, JavaScript or <use> references in your page target IDs inside the SVG, turn on Keep IDs. Prefix IDs avoids clashes when several inline SVGs share a page.
Should I remove width and height?
Remove them when the SVG should scale with CSS, such as an inline icon sized by font-size or a responsive illustration. Keep them when the SVG is used as an <img> with no other sizing.
Is a data URI better than an SVG file?
For tiny icons used in CSS, a data URI saves a request. For larger or repeated graphics, a separate file is cached by the browser and is usually better.
Is my SVG uploaded?
No. Optimization runs entirely in your browser, and previews are shown as images, so scripts inside an SVG never run.
Missing something?
Tell us the tool you wish existed.
Describe the job and the file types involved. The most requested tools get built first.