SVG Optimizer

Shrink an SVG by removing comments, metadata and editor data, rounding path coordinates and collapsing whitespace. Compare the original and result side by side.

Last updated

About the SVG Optimizer

SVG files exported from Inkscape, Illustrator, Figma or Sketch often carry data a browser never uses: an XML declaration, comments, editor settings, metadata blocks and path coordinates with far more decimal places than any screen can show. This optimizer removes that overhead with a set of conservative text rules, then shows the original and optimized sizes, the percentage saved and previews of both versions side by side.

Rounding path data often brings the largest saving. The Decimal Precision slider (0–4, default 2) sets how many decimals remain in d attributes. Transforms always keep at least three, because a small error in a scale or rotation factor is multiplied across the whole shape. Lower precision means a smaller file but can visibly distort small icons, so compare the previews before downloading.

The rules are deliberately cautious. Whitespace inside <text> and <foreignObject> is left alone so words don’t run together. <script> and CDATA blocks are copied unchanged, and a DOCTYPE that defines entities is kept. Presentation attributes that inherit, such as stroke="none", are never removed, because a parent element might set a different value. Namespace declarations are dropped only when nothing uses them any more. Finally, the result is parsed as XML; if it fails while the original passed, it is discarded and you see a message instead.

This is a lightweight clean-up, not a full optimizer that rewrites path commands or merges shapes, so the saving depends heavily on the file. The Favicon Generator accepts SVG files, and the XML Formatter makes the optimized code readable again if you need to inspect it.

How to use the SVG Optimizer

  1. 1

    Add the SVG

    Drag an .svg file onto the drop area or click Browse Files.

  2. 2

    Choose the options

    Set Decimal Precision and tick the clean-ups you want: comments, <metadata>, empty attributes, <style> minification and, if you are sure, <title> and <desc>.

  3. 3

    Optimize

    Click Optimize SVG. The Original, Optimized and Saved boxes appear with previews of both versions.

  4. 4

    Check and download

    Compare the previews, copy the code with the copy button, or click Download Optimized SVG to save it as name-optimized.svg.

What it can do

Editor data removal

Removes Inkscape, Sodipodi, Sketch and Affinity attributes and elements, plus namespace declarations that are no longer used.

Path rounding

Rounds decimals in path data to 0–4 places without merging neighboring numbers or breaking compact arc flags.

Shorter colors

Converts rgb() to hex and #rrggbb to #rgb in color attributes and CSS declarations, but never inside url(#id) references or ID selectors.

Style minification

Removes CSS comments and extra whitespace inside <style> blocks.

Validity check and safe previews

The output is checked with the browser’s XML parser, and both previews are rendered as images, so scripts inside an SVG don’t run on the page.

Limitations

  • Not a full optimizer: it doesn’t merge paths, convert shapes to paths, remove unused definitions or shorten IDs.
  • Only d and transform values are rounded; coordinates in attributes such as x, y, width or points stay as they are.
  • Low precision settings can distort shapes, so always check the preview.
  • Removing <title> and <desc> also removes text that screen readers use for inline SVGs, which is why that option is off by default.
  • One file at a time, by upload only; you can’t paste SVG code.

Privacy

The SVG is read and rewritten by JavaScript in your browser. It isn’t uploaded to FlexyPdf’s servers.

Frequently asked questions

Will the optimized SVG look exactly the same?

At precision 2 or higher it normally looks the same at typical sizes, but rounding can shift points slightly. Very small icons or detailed illustrations may need 3 or 4. If anything has moved in the preview, raise the precision and optimize again.

Why is the saving so small for my file?

Files that were exported cleanly, or that mostly contain embedded bitmap images (base64 PNG or JPEG data inside the SVG), leave little for these rules to remove. Embedded image data is not recompressed.

Is it safe to remove metadata?

For display, yes: browsers ignore <metadata>. It can hold license or author information, so untick the option if you want to keep that.

Why wasn’t `stroke="none"` or `fill-opacity="1"` removed?

Those properties inherit from parent elements, so removing them can change the drawing when a parent sets another value. Only opacity="1", which does not inherit, is removed.

Can I paste the result straight into HTML?

Yes. Copy the code with the copy button and paste it into your page. If the graphic carries meaning rather than decoration, keep <title> so screen readers have a name for it.

What if optimization breaks the file?

After optimizing, the tool parses the result as XML. If your original was valid but the result is not, the result is thrown away and you get a message instead of a broken download.

Ratings & Reviews

—
No ratings yet
5
0
4
0
3
0
2
0
1
0

Rate SVG Optimizer

Help others by sharing your experience. Your rating is shown without your name.

0/600