/01 Stripping the bloat out of SVG files
SVGs exported from design tools carry a great deal that the browser does not need: editor metadata, hidden layers, empty groups, comments, excessive coordinate precision and unused definitions. Removing it commonly cuts the file substantially without changing a single visible pixel.
Paste or load an SVG and get the minified version back.
/02 What is safe to remove and what is not
Editor metadata, comments and unused definitions are always safe. Coordinate precision is the biggest saving — designers routinely export coordinates to many decimal places when two or three are indistinguishable on screen, though going too far distorts curves.
Be careful with anything referenced from outside the file. Stripping IDs breaks CSS or JavaScript that targets them, and removing title or description elements removes the accessible name a screen reader depends on. Always compare the optimised output against the original before shipping it.
/03 An SVG optimizer powered by SVGO
SVG files exported from Illustrator, Inkscape, Figma or Sketch carry far more than the drawing. They include editor metadata, comments, hidden layers, default attribute values that change nothing, and path coordinates written to many more decimal places than any screen can show. That bloat often makes up a large share of the file.
This SVG optimizer runs SVGO, the open-source optimiser that most build pipelines and icon libraries rely on, directly in your browser with multipass enabled, so it keeps optimising until no further savings are found. Paste SVG code or drop a file, and you see the original and optimised versions side by side, with both file sizes and the percentage saved. Copy or download the result.
The current SVGO defaults keep the viewBox, which is what lets an SVG scale cleanly, so optimised icons still resize properly in CSS.
/04 Optimising SVGs for websites
Optimised SVG is ideal inline in HTML, where it can be styled with CSS and loads with no extra request. If you rely on IDs or class names for CSS or JavaScript, check them after optimising, since unused-looking IDs may be shortened or removed.
On a server, SVG also compresses extremely well with gzip or Brotli because it is plain text, so an optimised and compressed icon is often only a few hundred bytes over the network. For React projects, SVGR converts SVG into components and uses SVGO under the hood.