Skip to main content
L
Loopaloo
Buy Us a Coffee
All ToolsImage ProcessingAudio ProcessingVideo ProcessingDocument & TextPDF ToolsCSV & Data AnalysisConverters & EncodersWeb ToolsMath & ScienceGames
Guides & BlogAboutContact
Buy Us a Coffee
L
Loopaloo

Free online tools for developers, designers, and content creators. Your files are processed in your browser and are never uploaded - no accounts required. A few network utilities (like What's My IP and Currency Converter) call public APIs to do their job and say so on their pages.

support@loopaloo.com

Tool Categories

  • Image Tools
  • Audio Tools
  • Video Tools
  • Document & Text
  • PDF Tools
  • CSV & Data
  • Converters
  • Web Tools
  • Math & Science
  • Games

Company

  • About Us
  • Contact
  • Blog
  • FAQ

Legal

  • Privacy Policy
  • Terms of Service
  • Disclaimer

Support

Buy Us a Coffee

© 2026 Loopaloo. All rights reserved. Built with privacy in mind.

Privacy|Terms|Disclaimer
  1. Home
  2. Image Processing
  3. SVG Optimizer
Add to favorites

SVG Optimizer

Optimize and minify SVG files over a real markup tokenizer, then verify the result by drawing both versions and comparing every pixel.

Edits stay in your browserMore image processingJump to full guide

Related reading

  • Turning a Bitmap Into SVG: How Image Tracing Works12 min read
  • Introduction to SVG: Scalable Vector Graphics for the Web10 min read

Initializing in your browser…

You might also like

Image Compressor

Compress to a quality or to a file size, with the size shown being the encoded file to the byte and the cost measured on the pixels: SSIM, PSNR, the worst channel and the share of pixels changed.

Image Resizer

Resize with the filter named (Lanczos, Mitchell, Catmull-Rom, bilinear, box or nearest) and the option to average LIGHT rather than stored bytes, which is worth 1.24 stops on a detailed picture.

Image to SVG Tracer

Trace a PNG or JPG into real SVG paths, with holes that stay holes and transparency that is not read as black. The page counts the pixels its own vector differs from the picture, and at the exact setting that count is zero.

SVG Optimizer: a worked example

An Inkscape export, run through the optimiser at its safest setting.

In the file

<sodipodi:namedview id="namedview1" pagecolor="#ffffff" inkscape:zoom="4"/>
What SVG Optimizer produces

What the page reports

1.24 KB to 578 B, 54.3% saved
Both files were drawn at 320 by 320 and not one of the 102,400 pixels changed.
removeEditorData: a <sodipodi:namedview> element, 75 B
removeMetadata: a <metadata> block, 252 B

The previous version stripped that element with a regular expression whose [^=]* ran past the element NAME to the first equals sign, leaving "< pagecolor=..." and a file the browser refused to draw, at every preset including Safe. Working on markup tokens makes that impossible, and rendering both files and comparing the pixels is what proves it.

About the SVG Optimizer

Shrink an SVG by removing what a drawing program left behind, and then check that it still draws the same picture. Both files are rendered at the same size and every pixel is compared, so the page can say whether anything moved rather than only how many bytes went.

How to use

  1. 1Upload an SVG file
  2. 2Pick a preset, or open Options and choose the rules yourself
  3. 3Read the pixel verdict: either nothing changed, or the page says how many pixels did and by how much
  4. 4Download the cleaned SVG or copy it

Where this helps

  • Figma or Illustrator export

    Strip the editor metadata and namespaced attributes, with a check that the picture came through.

  • Inline SVG in a page

    Collapse the whitespace and shorten the ids for markup that goes straight into HTML.

  • Deciding how far to round

    Let the tool try every precision and pick the smallest that costs nothing, rather than guessing at three places.

Key features

  • Rendered-pixel verification: both files drawn at the same size and every pixel compared
  • A button that finds the smallest coordinate precision costing zero pixels
  • Token-based rules, so a comment inside text, a number inside text and an id that looks like a colour are all left alone
  • Eight-digit hex colours with alpha are not mangled into a different colour
  • Unused definitions really are removed, and ids really are shortened with their references updated
  • title and desc kept by default, because they are the accessible name and description
  • Well-formedness checked on the output with a line and a column
  • Every rule that fired listed with the bytes it saved

Examples

  • Inkscape export cleanup

    A 1.24 KB Inkscape file drops to 578 bytes under the safe preset with not one of 102,400 pixels changed, where the previous version produced markup the browser refused to draw at all.

How it works

The file is taken apart into markup tokens by the same lexer this site's XML formatter uses, rather than searched with patterns, and every rule then acts on a thing it can actually identify. That matters because the previous version was a stack of about a dozen regular expressions, and measured against the only reference an optimiser has, which is rendering both files and counting the pixels that moved, it failed in four separate ways. An Inkscape export came out UNRENDERABLE at every preset including the one called Safe: the attribute-stripping pattern ran greedily past an element name to the first equals sign and turned a self-closing sodipodi:namedview into a stray angle bracket, which a browser refuses to draw. A file using ordinary SVG features lost 14,986 of 102,400 pixels at the default preset, 14.63 percent, worst channel 255. And two checkboxes, Remove Unused Defs and Shorten Ids, were rendered, set by presets, and read by nothing.

Each of those has the same cause and the same fix. Whitespace is now removed only from text nodes that are whitespace and NOTHING else, which is the one rule XML has without a schema, so a text element keeps its double spaces and xml:space="preserve" is honoured. Comments are removed as comment nodes, so the characters that look like a comment inside a text element survive. Numbers are rounded only in attributes whose value really is a number (the path data, the coordinates, the transforms, the viewBox), so a document that prints pi to eight places still prints pi to eight places. Colours are shortened only in attributes that really hold a colour, so id="red" is left alone, and an eight-digit #RRGGBBAA is left alone too: the old pattern matched its first six digits and turned #aabbccdd into #abcdd, a different colour with a different alpha. Both dead options now work, and shortening an id rewrites every url(#...) that refers to it in step.

After every change the page does the thing the copy used to merely assert: it draws both files at 320 by 320 and compares every pixel, and says either that not one of the 102,400 changed or exactly how many did and by how much on the worst channel. On the four corpus files the safe preset now changes zero pixels every time, where the old one made one of them unrenderable. Because the check exists, a new button becomes possible: try every coordinate precision from 6 down to 0, render each, and select the smallest one whose output is pixel identical. On one test file that is five decimal places, a saving the default three would have taken at the cost of 194 moved pixels.

One rule changed on principle rather than on a measurement. A title element is the accessible NAME of an SVG and desc is its description (SVG 1.1 section 5.4), and the old tool removed both at every preset. They are kept by default now; the aggressive preset still removes them, and says what that costs. The output is also checked for well-formedness with a line, a column and the specific problem, and every rule that fired is listed with what it removed and how many bytes it saved, so the saving is attributable rather than a single percentage.

Frequently asked questions

Will optimization change how my SVG looks?

The page tells you, for your file. Both versions are drawn at 320 by 320 and every pixel is compared, and the verdict is either that none of the 102,400 changed or exactly how many did. The safe preset changes none on any of the corpus files; rounding coordinates is the setting that can move things, and it reports what it moved.

How much size reduction can I expect?

It depends entirely on what the file carries. An Inkscape export in the test corpus drops 54 percent under the safe preset and 71 percent under the aggressive one, almost all of it metadata and namespaced attributes. A hand-written file with none of that saves almost nothing, and the page shows every rule that fired with the bytes it saved so you can see where the saving came from.

Why are title and desc kept by default?

Because they are the accessible name and description of the graphic (SVG 1.1 section 5.4). Removing them means a screen reader announces nothing for it. The aggressive preset still removes them and warns.

What is the smallest lossless precision button?

It runs the optimiser at every coordinate precision from six decimal places down to zero, renders each result, and picks the smallest one that changes no pixels. That is a per-file answer, which is why no fixed default can be both small and lossless.

Related tools and how they differ

  • SVG to PNG/JPG: Converts SVG out to a PNG, JPG, or WebP bitmap at a set resolution. Use it when you need a pixel image instead of a cleaner vector.
  • Image to SVG Tracer: Creates SVGs in the first place by tracing a raster image into paths. Use it to vectorize a logo or icon, then optimize the result here.

Further reading

  • Turning a Bitmap Into SVG: How Image Tracing Works12 min read
  • Introduction to SVG: Scalable Vector Graphics for the Web10 min read

Private by design

Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.