SVG Optimizer and Converter

Why optimise SVG

SVG files saved from Illustrator, Figma, Inkscape or Sketch are full of things a browser does not need: editor settings, comments, empty groups and numbers with ten decimals. Removing them makes pages load faster and keeps your code tidy, without changing the picture.

How to optimise

1. Paste the SVG code into the left box, or press Open file. A sample is loaded so you can see the effect at once.
2. The right box shows the optimised code, the new size and the percentage saved.
3. Compare the Original and Optimised previews. A small visual check also draws both and tells you if they match.
4. Adjust the options if needed, then Copy or Download .svg.

What each option does

• Number precision rounds coordinates. Three decimals is usually invisible. Icons drawn on a very small grid automatically get extra decimals.
• Remove comments, metadata and editor data strips Inkscape, Sketch and similar leftovers.
• Remove unused IDs deletes IDs that nothing refers to.
• Shorten colours turns #ffffff into #fff and rgb values into hex.
• Collapse whitespace removes spaces between tags, but never inside text, style or script elements.
• Remove width and height keeps only the viewBox so the SVG scales to its container.

Convert to PNG, JPG or WebP

Choose a scale from 1x to 8x, or type an exact width in pixels. Pick the format and whether the background is transparent or a colour, then download. Because SVG is vector, big sizes stay perfectly sharp.

Embed in CSS

Copy the SVG as a Base64 or URL-encoded data URI to use as a CSS background or an image source with no extra file request. URL-encoded is usually shorter.

When not to optimise

If your SVG relies on external fonts, scripts or animations controlled from outside, test it after optimising. Keep your original file as the editable master.