SVGSketch Learn

How to Optimize and Minify SVG

Run SVGO at export time and round the coordinates. Measured over 114 real-world SVGs, the median file loses 19% - and a few get larger.

Open SVGSketch

Quick answer

Open the SVG in SVGSketch, open the Export panel, choose SVG, enable "Optimize with SVGO", set the Precision field to 2-3 decimal places, and download. Clear "Pretty-print output" too if you want the smallest file rather than a readable one. Across 114 real-world SVGs run through those exact settings, the median saving is 19% with pretty-printing on and 25% with it off.

Steps at a glance

  1. Open and audit

    Open the XML Inspector (F12) to see what is bloating the SVG.

  2. Remove unused defs

    Delete unused imported definitions; enable gradient/pattern deduplication in the export options.

  3. Flatten groups

    Ungroup single-child <g> wrappers with no transform or class.

  4. Round precision

    Set the Precision field to 2-3 decimals in Export.

  5. Optimize with SVGO

    Enable "Optimize with SVGO" in the SVG export options; all fourteen plugin toggles are on by default.

  6. Drop the pretty-printing

    Clear "Pretty-print output" when you want the smallest file rather than a readable one.

  7. Verify

    Compare rendering and size before shipping.

What optimization actually saves

OPTIMIZE WITH SVGO, MEASUREDChessCastlingMovie_en.svgBefore15.2 KBAfter12.3 KB19% smaller. Across 114 real-world files the median is 19%.
What optimization actually saves Measured, not estimated: the editor’s own SVGO settings run over 114 real-world SVGs. The median file loses 19%; a quarter lose less than 8%.
PRETTY-PRINT PUTS THE BYTES BACKAmpel_animiert_css.svgBefore2,071 bytesSVGO + Pretty-print2,362 bytesSVGO alone2,070 bytes
When optimizing makes a file bigger Pretty-print output is on by default, so a file that arrived minified gets its indentation back and ends up larger. 7 of 114 corpus files do. Clear that checkbox and the median saving rises to 25%.

Step 1: Open the SVG and audit it

Drag the .svg onto app.svgsketch.com. Open the XML Inspector (F12) to see the raw markup. Most "bloated" SVGs have one of these problems: long base64-encoded fonts, redundant <g> wrappers, identical gradient definitions, ten-decimal-place coordinates, or hidden metadata from the original tool.

Step 2: Remove unused defs and metadata

In the Elements panel, delete unused imported definitions - source tools often duplicate gradients, filters, and patterns. In the SVG export options, enable "Deduplicate identical gradients and patterns" so duplicated paint definitions collapse to one. It is off by default, because merging definition ids is a lossy change to addressable structure rather than a free win.

Clear "Include metadata" in the same panel to drop the document's <metadata> block along with any <link> and <meta> a source tool left behind. The title and description are always written: they are the SVG's accessible name, not bookkeeping, and they cost a few dozen bytes.

Step 3: Flatten unnecessary groups

Select redundant single-child <g> wrappers and use Object > Ungroup (Ctrl+Shift+G), or run Object > Clean Up Empty Groups. A grouping that does not have a transform, opacity, or class is just bytes - the SVGO "Collapse groups" toggle handles the rest at export time.

Step 4: Round numeric precision

Open the Export panel and set the Precision field to 2 or 3 decimals. Path coordinates like "M127.87349832 482.10283745" become "M127.87 482.1" - visually identical, dramatically smaller.

Step 5: Enable "Optimize with SVGO"

In the SVG export options, check "Optimize with SVGO". This runs the industry-standard SVGO optimizer, and reveals fourteen per-plugin toggles - all on by default: Cleanup IDs, Remove doctype, Remove comments, Remove empty attrs, Remove empty containers, Remove unused namespaces, Remove hidden elements, Remove empty text, Collapse groups, Optimize path data, Optimize transforms, Merge paths, Remove useless stroke/fill and Cleanup numeric values.

Step 6: Turn off pretty-printing for the smallest file

SVGO does not control whitespace here - Pretty-print output does, and it is on by default. That is the right default for markup you are going to read or commit, but it works against you on a file that arrived minified: the indentation goes back in and the file can finish larger than it started. Clear the checkbox when size is what matters.

Step 7: Verify and compare

Open the optimized SVG in a browser, compare it side by side with the original, and confirm the rendering matches. Compare the sizes in your file manager or shell - the Export panel reports no before-and-after figure, so the comparison happens outside the editor.

What the numbers actually look like

The honest answer is that it depends on what the file already is, and the spread is wide. Running the editor's own SVGO settings over 114 real-world SVGs - the corpus SVGSketch uses for import regression testing - the median file loses 19%. A quarter lose less than 8%, a quarter lose more than 34%, and 7 of them come out bigger because pretty-printing put whitespace back into an already-minified file. With that checkbox cleared the median rises to 25% and nothing grows.

Files exported from a drawing application have the most to lose, which is the case this article is usually read for: across the 16 Illustrator-, Inkscape- and Sketch-authored files in the same corpus the median saving is 36%, and the best of them drops 87%.

Reduce the geometry, not just the markup

SVGO rewrites how the geometry is spelled; it does not remove points. When a path came out of the vectorizer or a freehand stroke it may carry far more nodes than the silhouette needs. Select it and use Shape > Simplify Path (Ctrl+Shift+{), which removes nodes within a tolerance you set from the Edit tool toolbar - the split caret beside the button opens Simplify Options and its "Tolerance (% of bounds):" field. That is an edit to the document, so check the result before exporting.

Note that there is no optimize command for the working document. SVGO runs on the bytes leaving the editor, so the document you keep editing is unchanged and you can re-export at different settings whenever you like.

FAQ

How much smaller can SVGSketch make my file?

Measured over 114 real-world SVGs with the editor's own SVGO settings, the median file loses 19%; a quarter lose less than 8% and a quarter more than 34%. Files exported from a drawing application have more to remove - the median across the Illustrator, Inkscape and Sketch files in that corpus is 36%. A file that is already minified and hand-tuned may barely move.

Can optimizing make my file bigger?

Yes, and 7 of the 114 files in that corpus do. "Pretty-print output" is on by default and is applied after SVGO, so a file that arrived minified gets its indentation put back. Clear that checkbox and the median saving rises to 25% with nothing growing.

Will optimized SVG look different from the original?

The default plugin set only removes data with no visual effect - comments, empty attributes and containers, unused namespaces, redundant precision. The one to watch is the Precision field: rounding to fewer than about 2 decimals can visibly move nodes on a small viewBox, so compare the result before shipping.

Can I keep my IDs?

Clear the "Cleanup IDs" toggle in the SVGO options. It is ON by default, so ids are minified and unreferenced ones removed unless you say otherwise - which breaks anything addressing them from script or CSS.

Does this run SVGO under the hood?

Yes. The "Optimize with SVGO" option runs the real SVGO optimizer inside the browser, with individual plugin toggles so you control exactly which transformations apply.

Can I batch optimize a folder of SVGs?

The SVGSketch CLI works on .svgs source documents (`svgsketch render`, `svgsketch codegen`) rather than batch-optimizing plain .svg files. For a folder of plain SVGs, run SVGO directly - it is the same optimizer the editor uses.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open SVGSketch