SVG Optimizer
Strip what the editor left behind and round the numbers, without changing what the file draws. Every rule here is safe or optional.
Enable JavaScript to optimise your own file; the result below is for the example.
Nothing is uploaded. The file is parsed and rewritten in this tab.
The only setting that can change what you see. Two is invisible at any normal size; zero can move an edge by half a unit.
The browser will not draw the pasted file: as XML it is not well formed, usually an unbalanced tag or a namespace prefix nothing declared. The optimised copy often is well formed, because it was rebuilt from what could be parsed.
779 bytes to 274, 65 percent smaller. Dropped 1 comment, 1 declaration, 5 empty or descriptive elements, 4 editor attributes, 3 unreferenced ids, 3 default values. Shortened 16 numbers to 2 decimals. Shortened 2 colours.
Compare the two before you ship: the only rule here that can change what you see is the number of decimal places.
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 48 48"><g><path fill="#f80" d="M24 4.5C13.2 4.5 4.5 13.2 4.5 24C4.5 34.8 13.2 43.5 24 43.5C34.8 43.5 43.5 34.8 43.5 24C43.5 13.2 34.8 4.5 24 4.5Z"/><circle cx="24" cy="24" r="9.12" fill="#fff"/></g></svg>
An SVG out of Illustrator or Figma is mostly not drawing instructions. It is an XML declaration, a generator comment, a metadata block, an editor’s private attributes, coordinates to fourteen decimal places, and a group that holds nothing. None of that reaches the screen, and all of it reaches your visitors.
This removes it. What it will not do is the clever things: merging paths, converting shapes to paths, guessing that a group is redundant. Those are how an optimiser breaks a file.
How to use
- Paste the SVG. Editor export, hand-written, anything.
- Read the line under the output: bytes before, bytes after, and what was dropped.
- Leave Decimal places at 2 unless you have a reason. It is the one setting that can change what you see.
- Turn on Keep title and description if the graphic carries meaning rather
than decoration: a
<title>is what a screen reader announces. - Copy the result.
Example
A 48 pixel icon out of Illustrator, 807 bytes, becomes 289:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#f80" d="M24 4.5C13.2 4.5 4.5 13.2 4.5 24…"/><circle cx="24" cy="24" r="9.12" fill="#fff"/></svg>What went, and why each one is safe:
- The XML declaration and the generator comment. Neither is read by a browser.
<metadata>,<title>and<desc>. The first draws nothing; the other two are kept on request.version="1.1"andxml:space="preserve". The first is ignored, the second matters only inside<text>.id="unused_group", because nothing in the file points at it. An id something references byurl(#id)orhref="#id"is kept.fill-rule="nonzero",stroke-width="1",opacity="1": all of them are already the default.widthandheight, because theviewBoxis there. That is also what makes the SVG scale to its container instead of sitting at 48 pixels forever.- The empty group and the empty
<defs>. xmlns:xlink, once nothing used anxlink:attribute any more.
And 24.000000 became 24, M 24.0 4.5 C became M24 4.5C.
Pitfalls
Decimal places is the one rule that changes pixels. At 2 the difference is invisible; we measured it. Five SVGs were drawn before and after at 256 by 256 and compared pixel by pixel: four were identical, and the fifth differed in 65 pixels out of 65,536, along the edge of a circle whose radius went from 16.123456 to 16.12. At 6 decimals that case is identical too. At 0 decimals expect to see edges move.
Dropping ids is safe inside the file and not outside it. If your CSS says
#icon-star path { fill: red } or your script calls
getElementById, that id is referenced from somewhere this tool cannot see.
Turn Keep every id on.
An inline SVG shares its ids with the page. Two optimised icons that both
kept id="a" will fight, and the second gradient will win. Prefix ids per icon
before inlining, or use <img>.
<style> inside the SVG is left alone. Selectors in there can point at
anything, so nothing inside a <style> element is touched and no id it mentions
is treated as unused. Removing the style element yourself is usually the bigger
win.
This is not a compressor. Gzip on top of this is another 60 to 70 percent, and your server does that already. The point here is the bytes gzip cannot help with, and the parse time.
Compatibility
The parser keeps the case of tags and attributes, which SVG needs and HTML does
not: viewBox, linearGradient, clipPath and gradientTransform only work
spelled the way they were written. Elements with no children come out
self-closed, which is valid in both SVG and XHTML.
Output is SVG 1.1, the same profile the input almost certainly was. Nothing here is specific to a browser: the result renders in Chrome, Safari, Firefox, and opens in Illustrator, Figma and Inkscape, minus the editor metadata that only the editor that wrote it could read.
Numbers are formatted the same way on the server and in the browser, down to what happens on an exact tie, which is why the page shows the same result before and after it becomes interactive.
Frequently asked questions
Why is my file only 5 percent smaller?
Can I optimise a whole sprite sheet?
<symbol id="..."> is
referenced by <use href="#...">, so those ids are kept, and any orphan symbol
ids are reported as dropped, which is usually a sign the sprite has entries
nothing uses.Does it touch animation?
<animate> and begin="x.click" references are
treated as id references, so the ids they point at are kept. Timing values are
numbers, so they are rounded like any others; at 2 decimals that is four
significant figures on a second, which is finer than any frame.Why keep x="0px" on the root?
x and y on the outermost <svg> are harmless and this tool only
removes what it can prove does nothing. Removing them by hand is fine.What about converting shapes to paths?
<circle> is smaller than the path that draws it, it
is easier to edit later, and the conversion is exactly the kind of clever rule
that produces a file that looks right until it is scaled.