How to use the SVG Optimizer
- Drop one or more .svg files into the box, choose them, or paste SVG code.
- Each file is optimized immediately. Compare the original and optimized previews to check nothing changed.
- Adjust Number precision: lower numbers make smaller files; raise it if curves look different.
- Download each file, copy the code or a data URI for CSS, or download everything as a zip.
What gets removed
- Editor metadata, comments, XML declarations and doctype.
- Hidden and empty elements, unused definitions and IDs.
- Default attribute values and unnecessary groups.
- Extra decimals:
50.0000000becomes50. - Path data is rewritten in a shorter form, and shapes are converted to paths when that's smaller.
Icons exported from design apps often shrink by 30–70%.
Accessibility: keep the title
The <title> element is what screen readers announce for an SVG image, so it's kept by default. Only remove it for purely decorative graphics.
width, height and viewBox
The viewBox is always kept so the image scales correctly. Tick Remove width/height if you size icons with CSS: the SVG then fills its container.
Is it safe to open SVGs here?
SVG files can contain scripts. Previews here are shown as images, which browsers never allow to run scripts, and nothing is uploaded.
Frequently asked questions
Which optimizer does this use?
SVGO version 4, the open-source tool used by most build systems and design-to-code tools, running entirely in your browser.
Why does my optimized SVG look slightly different?
Very low precision can move points slightly. Increase <b>Number precision</b> to 3 or more for detailed illustrations.
Can I optimize many files at once?
Yes. Drop as many as you like and use <b>Download all</b> to get a zip.
How do I use an SVG in CSS?
Click <b>Copy as data URI</b> and use it as <code>background-image: url("…")</code>.