SVG Optimizer - Optimize & Minify SVG Files Online

Optimize, minify, and compress SVG files by removing metadata, optimizing paths, and cleaning up redundant code. SVGO-powered, 100% client-side — no data sent to server.

SVG Input

Drop SVG file here or click to browse

Settings

Precision3

Decimal precision for numeric values (lower = smaller files)

Multipass

Run multiple passes until no further optimization

Prettify Output

Format output with indentation

Plugins

Cleanup

cleanupAttrscleanupIdscleanupNumericValuescleanupEnableBackground

Conversion

convertColorsconvertShapeToPathconvertEllipseToCircleconvertPathDataconvertTransforminlineStyles

Removal

removeDoctyperemoveXMLProcInstremoveCommentsremoveMetadataremoveEditorsNSDataremoveUselessDefsremoveUnknownsAndDefaultsremoveNonInheritableGroupAttrsremoveUselessStrokeAndFillremoveHiddenElemsremoveEmptyTextremoveEmptyAttrsremoveEmptyContainersremoveUnusedNSremoveDesc

Optimization

mergeStylesminifyStylesmoveElemsAttrsToGroupmoveGroupAttrsToElemscollapseGroupsmergePathssortAttrssortDefsChildren

SVG files are processed entirely in your browser. No data is sent to any server.

Frequently Asked Questions

What is SVG optimization and why do I need it?

SVG optimization reduces file sizes of SVG (Scalable Vector Graphics) files by removing unnecessary data and applying lossless transformations. Design tools like Adobe Illustrator, Figma, Inkscape, and Sketch often embed verbose metadata, editor-specific namespaces, comments, and unoptimized path data. This extra data can make SVG files 2-5x larger than necessary. Optimizing SVGs improves web page load times, reduces bandwidth, improves Core Web Vitals scores, and produces cleaner code. Unlike raster image compression, SVG optimization is lossless — the visual output is identical.

How do I use this SVG optimizer tool?

There are two ways to provide SVG input: (1) Drag and drop an SVG file onto the upload area, or click to browse your files. (2) Paste SVG markup directly into the code input area. Once your SVG is loaded, the tool automatically optimizes it using SVGO's default plugin preset. You can fine-tune optimization by adjusting the precision slider, enabling multipass mode, or toggling individual plugins in the settings panel. The optimized SVG is displayed alongside compression statistics. Click Copy to copy the result to your clipboard, or Download to save it as a file.

Is my SVG data safe? Are files uploaded to a server?

Your SVG data is 100% safe and never leaves your browser. All optimization is performed client-side using the SVGO JavaScript library running directly in your browser. No SVG data is transmitted to any server, no data is collected, and no tracking occurs. You can verify this by monitoring your browser's network tab — you will see zero outgoing requests during optimization. This makes the tool safe for proprietary, confidential, or sensitive SVG assets.

What is the difference between raw size and gzip size?

Raw size is the actual file size in bytes on disk. Gzip size is the file size after gzip compression, which is what web servers typically use when transferring files over HTTP. Gzip size is more representative of actual bandwidth impact because most web servers compress SVG files before sending them to browsers. An SVG might show a 40% raw size reduction but a 25% gzip reduction — the gzip figure is what actually matters for page load performance. This tool shows both metrics so you can make informed decisions.

What does the precision setting do?

The precision setting (0-8) controls how many decimal places are preserved in numeric values within the SVG, particularly in path data coordinates and transform values. Lower precision (1-2) produces smaller files but may cause visible distortion in complex SVGs. Higher precision (5-8) preserves more detail but results in larger files. The default precision of 3 is a good balance for most SVGs. For simple icons, precision 1-2 is usually sufficient. For complex illustrations or maps, precision 4-5 is recommended.

What is multipass mode?

Multipass mode runs the SVGO optimization pipeline multiple times until no further size reduction is achieved. A single pass may leave optimization opportunities that only become apparent after earlier transformations. For example, collapsing groups might reveal newly mergeable paths. Multipass typically achieves an additional 1-5% reduction over single-pass. The tradeoff is longer processing time, which is usually negligible for small to medium SVGs.

Which SVGO plugins are safe to use?

All 33 plugins in the preset-default are generally safe for most SVGs and are enabled by default. However, a few plugins can cause issues in specific cases: convertShapeToPath may cause problems with CSS animations targeting specific shape elements; inlineStyles can increase file size if styles are shared across many elements; removeViewBox (non-default) should almost never be enabled as it breaks SVG scaling. If your optimized SVG looks different from the original, try disabling plugins one by one to identify the cause.

Code Examples

import { optimize } from 'svgo';
import { readFileSync, writeFileSync } from 'fs';

function optimizeSvg(svgString, options = {}) {
  const { precision = 3, multipass = true, prettify = false } = options;

  const result = optimize(svgString, {
    multipass,
    floatPrecision: precision,
    js2svg: { pretty: prettify, indent: 2 },
    plugins: ['preset-default'],
  });

  const originalSize = Buffer.byteLength(svgString, 'utf8');
  const optimizedSize = Buffer.byteLength(result.data, 'utf8');
  const reduction = Math.round((1 - optimizedSize / originalSize) * 100);

  return { data: result.data, originalSize, optimizedSize, reduction };
}

const svg = readFileSync('icon.svg', 'utf8');
const result = optimizeSvg(svg, { precision: 2 });
console.log(`${result.originalSize} -> ${result.optimizedSize} (${result.reduction}% reduction)`);
writeFileSync('icon.min.svg', result.data);