Optimise SVG

Reduce SVG source size while preserving its rendered geometry.

freeworks offlinenothing uploaded
ToolSVG Optimizer
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

SVG markup is parsed into elements, attributes, styles, and path data; safe transformations remove redundant metadata, normalize numbers, and collapse equivalent structures while preserving rendered geometry. Optimizations must respect namespaces, viewBox, and paint order.

  • Editor metadata and verbose decimals are common lossless optimization targets.

Worked example

Strip XML declaration, comments, and shorten colors
Remove comments, whitespace, and shorten colors in SVG
Input
											<?xml version="1.0"?>
<!-- A red circle -->
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#ff0000"/>
</svg>
Output
												<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" fill="#f00"/></svg>

When to use this

Web builds, asset pipelines, and generated-icon reviews optimize SVGs.

Edge cases

  • Removing a viewBox can break responsive scaling.
  • CSS selectors can depend on element ids and order.
  • Merging paths with different fills changes paint semantics.

References