Slimming SVG exports by stripping unused Illustrator groups and layers

When you export an SVG straight out of Adobe Illustrator, the file you get back is rarely what you'd call lean. Legacy groups, hidden layers, template overlays, and a trail of empty <g> elements often ride along with the artwork you actually wanted. For a developer in Australia shipping assets to a nationwide audience — from a startup in Sydney to a regional news outlet in Toowoomba — those extra bytes add up across every CDN edge, every mobile user on a patchy NBN or 4G connection in the Pilbara, and every Lighthouse audit a client cares about. Learn more about How To Write A Ruby Gem That Wraps A C Library Via Ffi.

The reason these dead-weight elements exist in the first place is practical: Illustrator stores context that helps designers, not parsers. Locked layers, clipping masks referenced by hidden artwork, and named groups left over from earlier composition steps all end up as valid SVG nodes. Browsers happily render past them, so the cost stays invisible until you profile render time or check the network panel during a slow Telstra or Optus load test.

Stripping this overhead is rarely as glamorous as building animations, yet it is one of those unglamorous wins that compounds. A 280 KB illustration trimmed to 60 KB changes how fast a page becomes interactive, how long a regional visitor waits on a flaky link, and how comfortably your bundle fits inside a service worker cache. The techniques below come from real export pipelines, not theoretical optimisations.

Where Illustrator bloat hides inside an exported SVG

Most designers working in Australia have touched the same handful of icons for years — a koala silhouette here, a kangaroo road sign there, a property boundary map for a council tender. Those files accumulate structure. Each named layer in the Layers panel, every clipping mask that once framed a faded logo, and every guide group that helped align a piece of type becomes a node in the exported XML. The browser has no idea which of those nodes was a working artefact and which was the final artwork.

Empty groups are particularly common. A designer might right-click, choose Group, then delete the contents, leaving a <g> tag with an id and no children. You also see single-element groups wrapping a <path> that doesn't actually need a wrapper. These do nothing for layout if you control positioning through transforms applied directly to the path, yet they cost the renderer a traversal and, occasionally, a composite pass.

Layer metadata is the other silent contributor. Illustrator writes data-name attributes, inkScope drawing notes, and the occasional inherited class hook from an older template. None of that renders, but the parser still reads it, and any downstream stylesheet might match on it. A file exported for a banner ad in Melbourne could ship with a dozen of these attributes per shape, quietly inflating the size and slowing layout calculation in browsers that watch attribute mutations more aggressively than others.

Manual cleanup versus trusting the exporter

The most direct path is opening the SVG in a text editor and pruning by hand. For small icons this is fine, even pleasant — you can see exactly what each group did and decide whether to keep it. The trade-off shows up once you have a folder of seventy icons for a government portal, where manual cleanup becomes a Friday afternoon exercise that nobody volunteers for twice.

Programmatic cleanup scales much better. SVGO has become the default tool here, and its preset-default configuration strips a surprising amount of Illustrator detritus on its own: empty groups, unused IDs, editor namespaces, and invisible elements that fall outside the viewBox. You can layer additional plugins to strip transforms that cancel out, merge paths that share styles, and rename IDs to a short form that keeps DOM size predictable.

The two approaches are not mutually exclusive. Many local studios run SVGO during the build step, then keep a short list of "do not touch" attributes for artwork that ships to print partners who still expect Illustrator's metadata. The danger in fully automatic cleanup is over-pruning: SVGO can flatten a group whose transform was actually doing work, especially if that transform was inherited from a parent style. Always diff the output against the visual source, ideally by rendering both side by side in a real browser before merging.

Hand-tested tools and pipeline integrations

For one-off jobs, a tiny Ruby script that runs SVGO as a post-processing step fits naturally inside a Rakefile — the same discipline you would apply when wrapping C libraries with FFI in a Ruby gem, where unneeded overhead is stripped at the boundary rather than carried forever.

Visual Studio Code has a pair of extensions, SVG Cleaner and SVG Optimizer, that show a before-and-after diff as you save. They are convenient for designers who prefer not to leave their editor but expect a slightly smaller file on the way out. They are not a substitute for a build-time pass, but they catch the worst offenders before the file ever leaves the designer's machine.

Sketch and Figma both produce cleaner SVG than Illustrator by default, which is one reason some Australian agencies have quietly standardised on Figma for icon work even when the rest of the brand lives in Illustrator. If you must stay in Illustrator for parity with print collateral, save a copy as .ai, run Save As with the option to "Convert to SVG" and tick "Minimize" under the advanced options. That single checkbox catches a meaningful chunk of the dead weight, even if it doesn't replace a dedicated optimiser.

A team in Brisbane I know keeps a custom rake task that watches the assets/icons folder and re-runs optimisation whenever a file changes, with a size assertion that fails the build if any icon creeps above a fixed budget. That kind of guardrail beats remembering to optimise by hand every time.

Measuring the payoff with real benchmarks

Numbers tell the story better than principle. A typical export from Illustrator for a layered hero illustration might sit at 240 KB; run through SVGO with a few extra plugins, the same file lands near 70 KB. That is a 70 percent reduction, which on a 3G connection in a regional town like Ballarat halves the time to first paint.

Render performance tells a similar story in DevTools. A profile of an SVG with two hundred empty groups shows measurable layout recalculation cost on each scroll, even though nothing visible changes. Strip those groups and the layout shifts collapse to a single pass. The grid below compares how the common approaches stack up across typical project constraints:

Approach	Avg size reduction	Setup effort	Risk of visual change	Best fit
Illustrator "Minimize" export	20–35%	None	Very low	Quick one-off icons
Manual text editor cleanup	40–70%	High per file	Low if careful	One hero illustration
SVGO default preset	50–65%	Low	Medium	Most web pipelines
SVGO + custom plugins + build step	60–80%	Medium	Medium-high	Design systems at scale

The risk column is worth reading carefully. Manual cleanup is riskier at scale because it invites human error; SVGO with custom plugins is riskier at the edge cases where aggressive path merging produces tiny pixel shifts. The best fit column reflects what teams in Melbourne and Perth typically land on after a few projects of trial and error, not a universal recommendation.

Workflow habits that keep SVGs lean by default

Preventing bloat beats removing it later. A few small habits, set up at the start of a project, save hours later when a designer hands off a folder of one hundred icons.

• Set a strict file-size budget per asset type — 8 KB for UI icons, 40 KB for hero illustrations — and surface violations as a build error, not a warning.
• Use a layered build pipeline that runs SVGO before files enter version control, so designers never see the bloated original again.
• Adopt a naming convention where working layers, guides, and template frames live on locked layers prefixed with an underscore; cleanup scripts can then strip those layers confidently without touching final artwork.
• Replace Illustrator's default export with a single scripted action that opens each artboard, exports with "Minimize" ticked, and writes to a staging folder ready for the optimiser.
• Audit your icon set quarterly; an icon retired in Figma two months ago often lingers in the live bundle until someone notices.
• Profile on a real device, not just Chrome on a fast MacBook Pro — a mid-range Android handset on a regional network will surface latency that desktop audits happily miss.
• Keep one or two reference files from each project archived untouched, in case a future cleanup pass overcorrects and you need to roll back the visible artwork.

Make optimiser steps part of the everyday workflow

Treating SVG optimisation as a build-time concern rather than a one-off chore changes how a team operates. New designers onboard into a pipeline where the cleanest version of their work is the only version that ever reaches the repo, and reviewers stop commenting on file size because the system handles it.

If you maintain infrastructure or storage clusters alongside the front-end stack — and many Australian engineering teams wear both hats — the same discipline of stripping the unused applies just as well to dated vSAN nodes. A solid walk-through on designing a resilient vSAN cluster treats unused capacity the same way you would treat empty Illustrator groups: identify what the system carries but no longer needs, retire it deliberately, and verify that performance improves without surprising downstream consumers.

Open the next SVG you ship, paste it into a text editor, and count the empty groups. Even if you never write a build script, that ten-second habit will catch the worst cases before they reach production. Subscribe to The Coding Journal for more notes on the unglamorous side of shipping web work, and share the cleanup tricks that have saved you bandwidth in your own pipeline.