Path and shape optimization

SVGO plugins in this topic

• Round/rewrite paths convertPathData

  Rewrites path commands with fewer digits and simpler curves. Usually one of the largest wins on complex illustrations.

• Merge paths mergePaths

  Combines paths that share styling into fewer elements, reducing DOM size inside the SVG.

• Shapes to (smaller) paths convertShapeToPath

  Converts rect, circle, ellipse, and line elements to path equivalents, often smaller after path rounding.

• Convert non-eccentric <ellipse> to <circle> convertEllipseToCircle

  Replaces ellipses with equal radii by <circle> elements, which are more compact.

• Round/rewrite transforms convertTransform

  Optimizes transform attributes: shorter matrix notation, combined operations, fewer decimals.

• Collapse useless groups collapseGroups

  Removes unnecessary wrapper <g> elements that do not affect rendering.

• Move attrs to parent group moveElemsAttrsToGroup

  Hoists common child attributes up to parent <g> elements to reduce duplication.

• Move group attrs to elements moveGroupAttrsToElems

  Pushes group-level presentation attributes down to children when that yields smaller output.

• Remove out-of-bounds paths removeOffCanvasPaths

  Removes paths entirely outside the viewBox clipping region.

Related topics

• Responsive SVG sizing
• Transforms that can break SVGs

Try it

Open SVGOMG.net, load your SVG, and toggle the plugins above in the Features panel.