Guide
Shrinking SVG files with SVGO without changing how they look
SVG files exported from design tools carry a lot of baggage: editor metadata, comments, namespaces for programs you never used, absolute coordinates with six decimals and attributes that merely repeat their default values. None of it changes the picture, and all of it has to be downloaded. SVGO, the optimiser most front-end build pipelines use, removes it. This page runs the same library in your browser so you can clean a single file or a snippet without installing anything.
What gets removed or rewritten
The default preset deletes the XML declaration, the DOCTYPE, comments and editor-specific metadata such as the Inkscape and Sodipodi elements. It drops attributes that equal their default value, shortens colours (#FF3366 becomes #f36), trims numbers (64.000000px becomes 64), collapses empty groups and applies transforms where it can. Path data is rewritten with relative commands, shorter forms such as S for a smooth curve, and no unnecessary spaces. Multiple passes repeat the process until nothing more changes.
A worked example
Press Sample to load an Illustrator export of a round badge with a heart: it has the XML declaration, a generator comment, a DOCTYPE, a metadata block, a title, a group with a no-op transform and six-decimal numbers. The input is 1,259 bytes. With the defaults of three decimals and multiple passes, the output is 317 bytes, a saving of 74.8%. It reads <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64" height="64" viewBox="0 0 64 64">, then the title, a circle with fill="#f36" and stroke="#c03", and one path whose d is M32 46S18 36 18 27c0-5 4-8 8-8 …. The original and the optimised previews look the same. Switch on Remove title and the result drops to 291 bytes, 76.9% smaller.
Decimal places
Each coordinate is rounded to the number of decimals you pick. Three is safe for icons drawn on a grid of 24 or 64 units. Going to zero decimals shrinks the sample to 301 bytes but changes some curves into different command types, and on a small icon a one-unit error is visible. Large artwork with a viewBox of thousands of units tolerates fewer decimals than a small icon with the same shapes, because rounding error is relative to the size. Raise the precision to four or five if edges look slightly off.
Protecting what the page needs
Keep ids switches off the cleanup that shortens or removes id attributes. Turn it on whenever CSS, JavaScript, <use> references, gradients defined elsewhere or links like #badge depend on them. Remove title deletes the title element, which is what assistive technology reads for an inline SVG, so use it only for decorative graphics. Remove width and height deletes the size attributes so the SVG scales to its container; it needs a viewBox, which the file here has.
Edge cases
SVGO assumes static graphics. Embedded scripts, SMIL animations and CSS animations can be altered or flattened, so test them. Text that relies on a font stays as text; convert it to outlines in your editor if the font will be missing. Files with several nested transforms may change structure but not rendering. If the input is not valid SVG the page shows the parser’s message and no output.
Limits
Optimising reduces size, but it does not make a complex drawing simple: a trace with thousands of points will remain large. Raster images embedded as base64 are left untouched; compress them separately. Gzip or Brotli on the server will compress the result further. The tool processes one file at a time.
Related tools
- SVG to JSX Converter turns the cleaned file into a React component.
- SVG Sprite Generator combines several icons into one sprite sheet.
- SVG to CSS Converter embeds the file as a background image.
- Image Resizer handles raster files that SVGO cannot shrink.
Checked against the current version of the SVG Optimizer on .