EN
PortuguêsEnglishEspañol
All tools
Developer tools 100% free

SVG optimizer

Choose SVG files or paste the code. The tool cleans out what the browser doesn't use and shows how much smaller it got and a before and after preview.

How to use

Thank you so much for helping!

Every donation helps pay for the servers and keeps the tools free for everyone. Pick or type an amount:

Secure payment by Stripe. Opens in a new tab.
Back to CSS and design

Make your SVG lighter

Choose or drag the SVG filesThe files never leave your device.

Available in: PortuguêsEspañolEnglish

Advertisement

SVG optimizer: what it is for

Choose one or more SVGs or paste the code. The tool removes comments, the XML declaration, metadata, Inkscape, Sodipodi and Illustrator data, empty groups and whitespace, deletes unused ids and rounds coordinates to 0 to 3 decimals. Title and desc can be kept for accessibility.

See the size before and after, a side-by-side preview and download them one by one or all in a .zip. Nothing leaves your device.

How to use

  1. Choose SVG files or paste the code.
  2. Choose the decimals and what to remove.
  3. Check the preview and download the optimized SVGs.

When to use it

  • Icons and logos exported from Figma and Illustrator.
  • Making your site lighter.
  • Cleaning SVGs before inlining them in HTML.

Frequently asked questions

What gets removed?

Comments, the XML declaration, DOCTYPE, metadata, Inkscape, Sodipodi and Illustrator data, editor attributes, unused ids (optional), empty groups and extra whitespace. Coordinates are rounded to the number of decimals you choose.

How many decimals should I use?

For icons and logos, 1 or 2 decimals are usually invisible on screen. For very detailed drawings or ones with a small viewBox, use 3. Check the preview: if something gets distorted, increase the decimals.

Is the file uploaded to a server?

No. Everything happens in the browser; the files never leave your device.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools

Scroll reveal animation (pure CSS)Generate the effect of elements appearing as the page scrolls (scroll reveal) in pure CSS, with animation-timeline: view(): fade in, slide up, slide in from the sides, grow or unblur, with adjustable distance and scroll range, and without hiding anything in browsers that do not support it yet.Open →
CSS clamp() calculator for fluid typographyCalculate the CSS clamp() for text and spacing that grows with the screen width: enter the size on mobile and on desktop and the screen widths, and copy the value in rem, with a preview and a zoom accessibility warning.Open →
Google Fonts pairingsTry Google Fonts pairings for your website's headings and body text: pick a ready-made pair or build your own, see the preview with your text and copy the loading link and the CSS.Open →
Color contrast checker (WCAG)Check whether your text color has enough contrast with the background under the WCAG AA and AAA accessibility rules, with a live preview.Open →
Color converterConvert colors between HEX, RGB, HSL and CMYK and see lighter and darker shades.Open →
HEX color to Tailwind classFind out which color in the default Tailwind CSS (v3) palette is closest to your HEX or RGB color, with the perceptual distance and the five nearest options, or use the exact value with bracket syntax.Open →

The tools are provided as is, without warranty. We are not responsible for the results or for how they are used.