Skip to content

SVG Optimiser

Removes editor cruft, collapses transforms and rounds path precision, showing the rendered diff.

An SVG saved from a design tool carries editor metadata, transform lists nobody unwound, and coordinates written to seven decimal places. Removing all of that is easy; knowing whether it changed the picture is the hard part, which is why this shows a difference view rather than only a byte count.

🔒 Runs entirely in your browsersvgoptimizevectorweb

Drop an SVG

Or edit the markup below. Nothing is uploaded.

Edit the markup

How to use it

  1. Drop the SVG, or paste the markup

    It optimises as you type, so pasting a file and editing it in place both work.

  2. Set the precision

    On a 24-unit viewBox two decimal places is a hundredth of a pixel at 100× zoom. Below one place, icons start to visibly shift.

  3. Check the difference view

    It blends the optimised file over the original in difference mode: pure black means they render identically, and anything that lights up is a pixel that moved.

  4. Copy the SVG or the data URI

    The data URI here is URL-encoded rather than Base64, which is roughly 10% over the raw file instead of 33%.

Common questions

Why is “remove titles” off by default?

Because `<title>` is the accessible name of an inline SVG. Removing it saves about thirty bytes and turns a labelled icon into an unlabelled one for anyone using a screen reader.

My icon shifted slightly after optimising.

The precision is too low for its viewBox. A small viewBox means each unit is a large fraction of the picture, so rounding to one decimal place moves things visibly. Turn precision up until the difference view goes black.

Does it minify the path data?

It rounds the numbers and bakes a pure translation into them, and reports how many bytes that saved. It does not rewrite commands into shorter equivalents — that changes the curve family and is where path optimisers introduce real bugs.

Feed it from

Favicon Generator

Produces the whole favicon set — ICO, PNGs, Apple touch icon, web manifest — plus the HTML to paste.

Runs entirely in your browser

SVG to PNG

Renders an SVG to PNG, JPEG or WebP at any scale factor, with a transparent or filled background.

Runs entirely in your browser

Image to SVG

Traces a bitmap into SVG paths, tuned for logos and line art rather than photographs.

Runs entirely in your browser

QR Code Generator

Makes a QR for a URL, text, wifi, vCard or payment string, with error correction, logo and SVG export.

Runs entirely in your browser

Next

These accept what this tool produces, so the result can go straight in.

Favicon Generator

Produces the whole favicon set — ICO, PNGs, Apple touch icon, web manifest — plus the HTML to paste.

Runs entirely in your browser

SVG to CSS Data URI

Encodes an SVG as a CSS background data URI, escaping only what needs escaping to keep it small.

Runs entirely in your browser

SVG Path Editor

Converts path data between absolute and relative commands, moves, scales, rotates and reverses it, and shows the bounding box with a live preview.

Runs entirely in your browser

SVG to PNG

Renders an SVG to PNG, JPEG or WebP at any scale factor, with a transparent or filled background.

Runs entirely in your browser

Background Remover

Keys out a flat or single-colour background in OKLab and returns a transparent PNG, with a brush for fixing the edges.

Runs entirely in your browser

EXIF Remover

Strips camera, GPS and editing metadata from photos while leaving the pixels untouched.

Runs entirely in your browser