Last updated
SVG Optimization Pipeline
SVG optimization is a multi-step process that analyzes the SVG structure and applies a series of transformations to reduce file size while preserving visual fidelity. The most widely used tool is SVGO (SVG Optimizer), a Node.js-based tool with a plugin architecture where each optimization is a separate, configurable plugin.
Optimization Plugins by Category
| Category | Plugins |
|---|---|
| Cleanup | removeDoctype, removeXMLProcInst, removeComments, removeMetadata |
| Attributes | cleanupAttrs, removeUnknownsAndDefaults, removeNonInheritableGroupAttrs |
| Paths | convertPathData, mergePaths, convertShapeToPath |
| Colors | convertColors, removeUselessStrokeAndFill |
| Structure | collapseGroups, moveElemsAttrsToGroup, moveGroupAttrsToElems |
| IDs | cleanupIds, removeUnusedNS |
Programmatic Optimization
JavaScript
import { optimize } from 'svgo';
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<!-- This is a comment -->
<rect x="10.000" y="10.000" width="80.000" height="80.000" fill="#ffffff"/>
</svg>`;
const result = optimize(svgString, {
plugins: [
'removeComments',
'cleanupNumericValues',
{ name: 'convertColors', params: { shorthex: true } }
]
});
console.log(result.data);
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
// <rect x="10" y="10" width="80" height="80" fill="#fff"/>
// </svg>