SVG Optimization Techniques
Updated on
SVG optimisation matters because the format is only lean if you keep it lean. Exported files often carry extra metadata, repeated attributes, and coordinates with far more precision than a browser needs. The result is avoidable bloat. This guide deals with the practical side of trimming SVGs without breaking the artwork.
Why SVGs still need trimming
SVGs usually beat raster images on file size, but that does not mean the output is clean. Illustrator, Figma, and Sketch all tend to leave behind editor metadata, verbose coordinate values, and attributes that help the design tool more than the browser.
Once you are dealing with a library of icons, those small inefficiencies add up quickly. The benefit is not just bandwidth. Cleaner SVGs are easier to audit, easier to version, and less awkward to maintain when someone needs to edit them later.
What an SVG file actually contains
SVG is XML markup. A typical icon file is built from a few predictable pieces: a root svg element that sets the viewBox, dimensions, and namespace, metadata that records editor details and document properties, style definitions, the path elements that draw the shapes, and groups that keep related elements together.
For a fuller look at SVG structure and behaviour, see the MDN SVG Tutorial.
Cleaning SVGs by hand
Strip out metadata and comments
Design tools add information about the application, version, and creation date. That is useful to the editor. It is dead weight for the browser. XML comments and editor-specific namespaces can usually go too.
- Delete
<!-- comments --> - Remove
xmlns:sketch,xmlns:sodipodi, and similar namespaces - Strip
<metadata>and<defs>if empty
Tighten the coordinate values
Exported coordinates are often far too precise. A path such as M12.34567890,45.67891234 can usually be reduced to M12.35,45.68 without any visible change at normal icon sizes.
For most interface icons, 1-2 decimal places is enough. Push beyond that and you are usually paying in bytes for accuracy nobody will see.
Prefer shorter path commands where they fit
Path data can be written with absolute commands or relative ones. Relative commands often produce shorter output when the shape is compact, which is why they are worth checking on simple icons.
- Absolute:
M10,10 L20,10 L20,20 L10,20 Z - Relative:
M10,10 l10,0 l0,10 l-10,0 z
Merge paths where the shape allows it
Separate paths can sometimes be combined into a single compound path. That reduces element count and often shrinks the file. In the design tool, this usually means using "Unite" or "Merge Paths" before export. It is worth testing, because not every icon benefits equally.
Using SVGO without overdoing it
SVGO, short for SVG Optimizer, is the standard automated tool for this job. It applies a set of plugins to remove clutter, simplify path data, and compress the file.
Plugins that do the heavy lifting
- removeDoctype - Removes DOCTYPE declaration
- removeXMLProcInst - Removes XML declaration
- removeComments - Strips comments
- removeMetadata - Removes metadata elements
- removeEditorsNSData - Cleans editor namespaces
- cleanupAttrs - Removes unnecessary whitespace in attributes
- convertPathData - Optimizes path commands
- mergePaths - Combines adjacent paths when possible
- removeEmptyContainers - Deletes empty groups
How far to push the configuration
For icons, a moderately aggressive SVGO setup usually makes sense. The main thing to watch is IDs and classes. If CSS or JavaScript depends on them, a plugin that removes or renames those hooks can create needless trouble later.
Export settings in common design tools
Adobe Illustrator
When saving as SVG, use the "SVG Tiny" profile for icons. Turn off "Preserve Illustrator Editing Capabilities" and set decimal places to 1 or 2. "Presentation Attributes" generally produces simpler output than "Style Elements".
Figma
Figma's SVG export is fairly clean by default. Use "Outline Text" for any text elements, and flatten complex boolean operations before export if the shape is getting messy.
Sketch
In Sketch, enable "SVGO Compressor" in preferences so optimisation happens on export. Flatten complex shapes and avoid stacking layers for no reason. Deep nesting does not age well in SVG.
Design tools keep changing, and AI-powered generation is now part of that mix. If you're looking at how AI is reshaping image creation and design workflows, this overview of the new AI art workflow stack is a useful companion read.
A production checklist that catches the obvious misses
Before an SVG icon goes into production, run through the basics in order. Remove unnecessary layers and hidden elements in the design tool. Flatten complex boolean operations and expand strokes if that is needed for the shape. Convert text to outlines. Export with minimal decimal precision. Run the file through SVGO, or an equivalent optimiser. Then verify that it still renders correctly. Finally, check that any IDs and classes you need are still there.
Checking whether the optimisation actually worked
Measure the file before and after, in bytes, not by guesswork. Record the percentage reduction. Then compare the icon visually at the sizes it will actually be used at. That last step matters more than people admit, because a technically smaller file is not a win if the output has drifted.
For an icon library, keep the optimisation settings consistent across the set. Write them down. Otherwise the next person ends up guessing why one asset is tidy and another is full of leftover baggage.