Skip to content

SVG Optimizer

Options

Optimised SVG

Estimates for educational purposes — not financial, medical, or legal advice. See terms.

SVG files coming out of design tools (Sketch, Figma, Illustrator) typically carry a lot of overhead: editor metadata, comment blocks, unused IDs, path coordinates with absurd precision (50.000000 instead of 50). For an icon that ships in every page of your site, those bytes multiply across every cache miss. SVG optimisation strips the overhead without changing the rendered output.

This tool wraps svgo — the standard SVG optimiser — with a browser-side UI and a visual preview so you can confirm nothing rendered changed.

What svgo does

svgo runs a pipeline of small focused plugins, each handling one type of transformation. The default preset (preset-default) bundles the safe optimisations:

  • Remove comments — XML comments don’t affect rendering.
  • Remove metadata — <metadata> blocks (RDF, license info) are author-tooling output, not needed at runtime.
  • Cleanup IDs — detect unused IDs, shorten the ones that are used.
  • Round numeric attributes — cx="50.000000" becomes cx="50".
  • Collapse useless groups — <g> wrappers that don’t add anything become their child element.
  • Convert shapes to paths where shorter — sometimes <rect> becomes <path> if the path is shorter to express.
  • Merge adjacent paths — multiple paths with the same fill / stroke combine into one.

The full preset-default pipeline has ~30 plugins; the toggles in the UI give you per-plugin control over the most common questions (preserve title? aggressive precision rounding? pretty-print?).

When to optimise

Before commit. If your SVG icons live in your repo, optimise them once at commit time and check in the optimised version. Re-optimising at build time wastes CPU and adds variance.

At export time. If your design tool can run an svgo export plugin, configure it. Saves a manual step.

On bulk import. If you imported a third-party icon set, run the bulk through this tool (or the svgo CLI) to flatten the typical 30-50% bloat.

Example: optimising a Figma export

A typical Figma SVG export of a 24×24 icon weighs 800-1500 bytes — full of editor metadata, unused IDs, and 6-decimal-precision path coordinates. After optimisation: 200-400 bytes. For a 30-icon set, that’s 30 KB saved across the site. If the optimised output still needs recolouring to match your palette, the SVG color changer handles bulk fill swaps on the result.

Example: optimising a hand-written illustration

A more complex SVG (an illustrated logo, a chart, a scene) may have many path elements with fine detail. The default precision (3 decimals) preserves visible detail; bumping precision down to 1 or 0 can save more bytes but may visibly shift very fine features. Use the visual preview to confirm. If you’re debugging which path segment got mangled, the SVG path viewer breaks a d attribute down command-by-command.

Common mistakes

Removing viewBox. svgo can do this and it saves a few bytes, but it breaks the SVG’s ability to scale responsively (width: 100% etc. stop working as expected). This tool keeps viewBox by default for that reason.

Removing title and desc on accessible icons. Screen readers announce the title element. For decorative icons (purely visual, conveying no information), removing them is safe. For meaningful icons (functional buttons, status indicators), keep them and add role="img" to the SVG.

Aggressive precision rounding without checking. Decimal precision 0-1 can introduce subpixel shifts that are visible at large render sizes. Default 3 is safe everywhere; 2 is safe for most sizes; 0-1 should be checked in the preview.

Optimising the same SVG multiple times. Each optimisation pass re-runs the pipeline. For files that have been optimised before, additional passes typically save zero bytes (or grow the file slightly). One pass is enough.

What this tool does not do

It doesn’t preserve editor-specific metadata (Sketch / Figma / Illustrator extension attributes). Those are stripped because they have no rendering meaning. If you need to round-trip through a design tool, work with the original .sketch / .fig / .ai file, not the SVG export.

It doesn’t convert SVG to other formats. For SVG → PNG conversion, use the canvas-based image tools.

It doesn’t fix invalid SVG. If your input doesn’t parse, the optimiser returns an error. Validate the SVG first if it might be malformed.

It doesn’t bundle multiple SVGs into a sprite. SVG sprites are a separate workflow (a parent <svg> containing <symbol> elements referenced by <use>); not a single-file optimisation.

Frequently asked questions

Will the optimised SVG look identical to the original?

With default settings, yes. The svgo preset-default plugin set is specifically chosen to be visually safe — strips comments, removes unused IDs, rounds path coordinates to a tunable precision (default 3 decimals, well below visible difference at any reasonable size). The visual preview below the output panel renders the optimised SVG so you can confirm. If you crank decimal precision down to 0 or 1, very small subpixel details may shift; check the preview.

Why does removing the title remove accessibility?

The <title> element inside an SVG is what screen readers announce. Removing it (and <desc>) saves bytes but makes the icon meaningless to assistive tech. The 'Remove title / desc' option is off by default for this reason — turn it on only for purely decorative icons that have a meaningful aria-label on their containing element instead.

Why does my SVG sometimes get larger after optimisation?

Rare, but possible. svgo can convert complex paths into simpler equivalents that happen to be longer to express, or substitute attribute syntax that's slightly more verbose. If your input is already heavily optimised (output from another tool, hand-crafted minimal markup), the optimiser may not find anything to remove and the bookkeeping overhead can produce a slightly larger output. The 'saved' counter shows negative numbers when this happens — keep your original.

What does 'cleanup IDs' do?

SVGs from design tools (Sketch, Illustrator, Figma exports) often have long auto-generated IDs like 'Path-Copy-2-Group-1234' that aren't referenced anywhere. The cleanup-IDs pass detects which IDs are actually used (referenced by <use href>, <linearGradient id>, etc.) and removes the rest. Used IDs get renamed to short versions (a, b, c...) for further byte savings.

Why is the viewBox preserved by default?

Removing the viewBox is one of svgo's possible optimisations but it breaks responsive scaling — without viewBox, the SVG can't size to its container the way most modern usage expects. This tool overrides svgo's default removal so that responsive icons stay responsive. If you have a fixed-size SVG that doesn't need scaling, the viewBox is small overhead and not worth removing.