How to optimize SVG files for the web (typical 40–80% size reduction)

SVGs from Figma, Illustrator, Inkscape, and Sketch are almost always bloated. The same 200-byte vector path that should be a 200-byte file ends up as a 3 KB file after the design tool adds editor metadata, document title elements, layer names, comments, XML namespace declarations the renderer doesn't need, and dozens of decimal-precision attributes (cx="50.000000"). For a logo on a homepage that loads on every page view, those 2.8 KB of cruft are real — they slow page load, use bandwidth, and add up across an entire site.

What SVGO does

SVGO (SVG Optimizer) is the standard tool for this. It applies dozens of "plugins" to your SVG — removing editor metadata, simplifying path data, rounding coordinates to reasonable precision, dropping unused attributes, merging duplicate definitions. The result is typically 40–80% smaller than the input, with no visible change. SVGO has been the canonical SVG optimization tool since 2012 and is what Figma's "Optimize SVG" export option uses internally.

Our SVG Optimizer runs SVGO in your browser. The library (~600 KB) lazy-loads on first use and caches for the session. Paste an SVG or upload a file, get the optimized version with byte-count delta shown.

Step-by-step

1. Open justfiletools.com/tools/svg-optimizer.
2. Paste your SVG markup into the input textarea, or click "Or upload a .svg file" and pick a file from disk.
3. Click Optimize. The first click lazy-loads the SVGO library; subsequent ones are instant.
4. Review the size delta. The tool shows input bytes, output bytes, and percent savings (typically -40% to -80%).
5. Compare the side-by-side previews. The source and optimized renderings should look identical.
6. Copy the output or download the optimized SVG.

What gets removed

SVGO's default preset applies these transformations:

• Editor metadata — <metadata> blocks with RDF/Dublin Core content, Inkscape-specific attributes (inkscape:label, sodipodi:*), Adobe-specific attributes.
• Comments — including the auto-generated "Created with Sketch" comment.
• Hidden elements — elements with display="none" or zero opacity that don't affect the rendered output.
• Excessive precision — coordinates like 50.000000 become 50; 3.14159265358979 becomes 3.14.
• Duplicate definitions — gradient or pattern <defs> entries that are used once get inlined; identical entries get deduplicated.
• Unused namespaces — xmlns:dc, xmlns:rdf, xmlns:inkscape are dropped if nothing references them.
• Default attributes — explicit values that match SVG defaults (fill-opacity="1", stroke="none" on text without stroke).
• Element collapsing — a <g> with one child and no transform gets collapsed into the child.

What gets kept

SVGO is conservative — anything that affects the rendered visual is preserved. Specifically, it keeps:

• All paths, shapes, and text with their original geometry.
• All colors, gradients, and patterns.
• Transforms (rotation, scale, translate), unless they can be safely merged into the affected coordinates.
• Animations (<animate>, <animateTransform> — they're rare but used).
• Interactive attributes (onclick, ARIA labels for accessibility).
• viewBox — without this, SVG scaling breaks. The tool's preset preserves it.

The removeDimensions + removeXMLNS tweaks

Our default preset adds two non-default plugins that matter for web embedding:

• removeDimensions — drops the width and height attributes from the root <svg>. With these dropped, the SVG scales to fit whatever CSS dimensions you apply to its container. With them kept, the SVG stays at its authored size regardless of CSS — usually not what you want for web.
• removeXMLNS — drops the XML namespace declaration. Safe when embedding SVG inline in HTML (the HTML parser handles the namespace automatically). Not safe when the SVG is loaded standalone via <img src="..."; if you do that, don't enable this plugin.

If your use case is inline SVG (paste markup directly into HTML), both tweaks are correct. If your use case is external SVG files served from a CDN, disable removeXMLNS.

Common pitfalls

Path simplification can drop tiny details. SVGO rounds coordinates to 3 decimal places by default. For most SVGs this is invisible. For SVGs with very fine detail (sub-pixel curves in a logo), there can be small visual differences. Check the side-by-side preview; if you see degradation, the input was at the boundary of SVGO's defaults — most users never hit this.

Optimizing already-optimized SVG. Running SVGO twice on the same file usually gets you a few more bytes off but with diminishing returns. After one pass, the file is close to its lower bound; further passes save 1–2% at most.

Animated SVGs. SVG animations (declarative SMIL with <animate>) are preserved by SVGO defaults. Lottie / Bodymovin animations are JSON, not SVG, and need different tooling.

Alternative approaches and when to use them

• npm install svgo + CLI. svgo input.svg -o output.svg on the command line. Scriptable for batches of files, integrates into build pipelines (webpack, Vite). Right tool for ongoing site work.
• SVGOMG (the SVGO playground). Same SVGO engine in a browser UI, with per-plugin toggles for fine-grained control. Useful when you want to inspect what each plugin does.
• Figma's "Optimize SVG export". Figma applies SVGO during SVG export when the option is enabled. Good for one-off Figma → SVG workflows. Less effective on Illustrator or Inkscape exports.
• Manual optimization. For very small SVGs (10-20 lines), reading the file and removing obvious cruft (metadata blocks, redundant attributes) by hand is fast. Above 50 lines, SVGO is faster and more thorough.

Privacy considerations

SVGs are usually low-sensitivity (logos, icons, illustrations). But: SVGs from enterprise design tools sometimes carry document IDs, project names, author information, or even internal asset paths in metadata blocks. If you're shipping an SVG that came from a confidential project, run it through the optimizer first to strip metadata before publishing. The in-browser nature of the tool means the SVG itself never crosses the network during optimization.

Related tools and guides

• SVG Optimizer — the tool this guide covers.
• Compress Image — for raster formats (JPG/PNG).
• Favicon Generator — uses SVG/PNG as source.
• How to compress images for the web.