The last logo file we received from an agency was 1.2MB. The drawing itself was maybe sixty anchors. The rest was layer names from 2019, an editor block nobody reads, a style sheet with eleven classes used once each, and coordinates carrying six decimal places. Two minutes of cleanup took it to 240KB with identical rendering at every size we tested.
Nothing about that story is unusual. SVGs arrive as working files and get shipped as if they were web assets. Optimizing one is mostly subtraction, and most of the subtraction is safe once you know which four things must survive.
Where the weight comes from
Editor metadata is the biggest offender: Illustrator and Figma write comments, data-name attributes, layer ids and namespace declarations that no browser needs. Path precision comes second – M12.345678 and M12.35 are identical on screen at any realistic size, but the first costs eight bytes per coordinate and complicated artwork has thousands of them. Dead code finishes the job: gradients, clip paths, filters and style rules left behind when an element was deleted.
None of it is visible. All of it is paid for by every visitor, on every page load, forever.
What you can remove without thinking
Safe: editor metadata and data-* attributes, comments, layer ids nothing references, empty groups, unused defs, redundant precision, duplicate attributes, and the whitespace between elements.
Not safe: the viewBox, any id referenced by url(#…) or href, gradients, masks, clip paths and filters that actually paint something, and text that has to stay selectable or searchable.
There is one specific trap worth naming. Illustrator exports class-based CSS – a <style> block with rules like .cls-1 – and those rules outrank presentation attributes. Delete the block carelessly and the artwork changes colour; keep it and the file stays heavier than necessary. The clean route is to flatten the simple rules into attributes first, then drop the block. That is exactly what our editor does on import, and it is why recolouring works afterwards.
Precision is where the real savings are
Artwork exported from vector editors is almost always over-specified. Designers place more anchors than the curve needs, and the exporter preserves every digit. Two passes fix most of it.
Simplify the path first, with a low tolerance so the silhouette does not drift. Then round coordinates: two decimals is indistinguishable at display sizes, and one is often enough for icons under 32px. On a detailed illustration, going from six decimals to two can remove 40% of the file.
Do it on a copy, and compare at 100% and at 3x. Over-simplification shows up as wobble on what should be a clean arc, and it shows up first on tight curves and thin strokes.
SVGO, and its friendlier face
SVGO is the reference implementation, and it is what nearly every other tool wraps. It is a command-line tool built from small plugins, each doing one removal – metadata, numeric values, useless defs, editor namespaces. Run with sane defaults on an Illustrator export and expect 40-60% off.
SVGOMG is the same engine in a browser, which makes it the better learning tool: original and result side by side, every plugin as a toggle. Use it to find out which options are safe for your artwork, then carry that configuration into a build step so nobody has to remember it.
Two rules when configuring either one: keep the viewBox, and be careful with precision settings on anything that has fine detail or sub-pixel strokes.
Half of it is an export setting
It is easier to avoid the mess than to clean it. In Illustrator, use Export As, SVG, presentation attributes instead of internal CSS, two decimals, and do not embed images you can link. In Figma, keep layer names meaningful, avoid effects that turn into filters, and only outline text when the font genuinely cannot ship.
Before exporting, flatten pointless groups, delete hidden layers, and expand strokes only when you need them as fills – expansion multiplies point count fast.
No terminal required
Not everyone wants a build pipeline, and not every job deserves one. Our browser-based SVG editor cleans a file as you drop it in: strips editor metadata, adds missing namespaces so it actually renders, flattens simple class rules into attributes, drops ids nothing references, and exports minified. It also lets you fix the artwork itself – nudge, scale, rotate, recolour, delete a shape – without going back to Illustrator for a two-pixel change.
Same principle as the command-line route: clean on import, keep the drawing, ship the small file.
Something broke. Check these five
- Flat grey where a gradient used to be – an id was renamed or a def was dropped.
- Artwork spilling outside its frame – a clip path or mask lost its reference.
- Shadows and blurs gone – the filter id was treated as unused.
- Colours changed after cleanup – the style block went before the rules were flattened.
- Repeated shapes vanished – a symbol referenced by
<use>was removed as dead code.
Quick sanity check: open the optimized file directly in a browser, not in the design app. The browser is the renderer that matters.
Do not strip the name
Optimizers treat <title> and <desc> as metadata and many delete them by default. If the graphic carries meaning – a logo, an icon button, an infographic – make sure a name survives somewhere. Decorative graphics should be hidden from assistive tech with aria-hidden="true". Meaningful ones need role="img" with an aria-label, or a title that stays in the file.
Most accessibility failures with SVG come from skipping that decision entirely, not from the optimization.
How to ship it
- Inline when the graphic has to inherit CSS colour or animate, accepting that it cannot be cached separately and adds to the HTML.
<img>for logos and static illustrations: cacheable, simple, clean markup.- Sprites for icon sets used repeatedly – one request, many symbols.
- Compression on the wire. SVG is text, so gzip or Brotli usually halves it again. Confirm the server actually does this for
image/svg+xml; it is a common gap.
Measure the win, not the habit
The number that matters is the transferred size on the live page, not the size on disk. A 180KB illustration landing at 22KB has paid for its cleanup many times over. A 4KB icon landing at 3KB has not, and spending an afternoon on it is a hobby. Sort by weight and fix the heavy files first.
Common questions
Does optimization hurt quality?
Lossless cleanups never change the rendering. Precision rounding and path simplification can, at extreme settings. Stay at two decimals and a low tolerance and you will not see the difference.
Should I optimize on every export?
Ideally it is automatic – a build step, or an editor that cleans on import. Manual optimization gets skipped exactly when a deadline is close, which is when it matters.
Can I trace a PNG into SVG and optimize that?
You can trace it, but the result is a different drawing: heavier, less precise, and usually worse than the original vector. Optimization removes redundancy; it cannot invent accurate vector data.
Why did my file get bigger after opening it in Figma?
Figma rewrites files on import and adds its own structure, ids and precision. Keep the export as the delivery artifact and treat the editable file as a separate object.