Last updated
What SVG Compression Does
SVG files exported from design tools like Illustrator, Inkscape, or Figma contain a lot of unnecessary data: editor metadata, empty groups, redundant attributes, default values, and verbose number precision. SVG compression (optimization) removes this bloat without changing the visual output, often reducing file size by 50–80%.
What Gets Removed
| Category | Examples |
|---|---|
| Editor metadata | Inkscape/Illustrator namespaces, sodipodi: elements |
| Comments | <!-- Created with... --> |
| Default values | fill="black", opacity="1" |
| Empty elements | <g></g>, <defs/> |
| Unused defs | Gradients, filters, symbols not referenced |
| Whitespace | Indentation, newlines between elements |
| Number precision | 10.000000 → 10 |
SVGO Configuration
JavaScript
// svgo.config.js
module.exports = {
plugins: [
'removeDoctype',
'removeXMLProcInst',
'removeComments',
'removeMetadata',
'removeEditorsNSData',
'cleanupAttrs',
'mergeStyles',
'inlineStyles',
'minifyStyles',
'cleanupIds',
'removeUselessDefs',
'cleanupNumericValues',
'convertColors',
'removeUnknownsAndDefaults',
'removeNonInheritableGroupAttrs',
'removeUselessStrokeAndFill',
'removeViewBox', // set to false if you need responsive SVG
'mergePaths',
'convertShapeToPath',
'collapseGroups',
]
};