All Tools View Categories Blog About Contact Privacy
Advertisement

Compress SVG Online

Minify SVG files up to 30% — strip XML comments, collapse whitespace, remove metadata — 100% private, zero upload, instant download.

100% private — images processed locally in your browser, never uploaded. Loading…
Drop images here
SVG — drop unlimited vector files
No images yet
Drop files above to get started
Global Settings
Balanced
Low (high quality)High (small file)
Good balance — recommended for photos
Max Width (px)
Max Height (px)
Aspect ratio always preserved. 0 = keep original dimension.
Complete SVG Compression Guide

How to Compress SVG Files Without Losing Visual Quality

SVG files exported from Inkscape, Illustrator, or Figma often contain megabytes of invisible metadata: namespace declarations, editor comments, unused definitions, and redundant coordinates. This tool strips all of it — here's exactly what gets removed and why it's safe.

14
Optimization passes
~70%
Typical Inkscape SVG savings
0
Visual changes
Text
Pure text compression

The 14 Transformations Applied to Your SVG

Each pass removes or simplifies a specific category of SVG bloat. None of these changes affect the rendered visual output — they only remove data the browser ignores during rendering.

PassWhat's RemovedTypical Savings
1XML processing instruction <?xml version="1.0" encoding="UTF-8"?>2–4%
2DOCTYPE declaration1–2%
3HTML/XML comments <!-- ... -->1–30%
4<metadata> blocks (Dublin Core, RDF, XMP data)5–40%
5Sodipodi elements (<sodipodi:namedview>, <sodipodi:guide>)3–15%
6Sodipodi element subtrees1–5%
7Inkscape elements (<inkscape:path-effect>)1–8%
8Inkscape element subtrees1–3%
9Editor namespace attributes (inkscape:*, sodipodi:*)5–25%
10Editor namespace declarations on <svg>2–6%
11–14Whitespace collapse, attribute spacing, newline removal10–35%

At compress level ≥ 30: Numeric precision is reduced from 6+ decimal places to 2. A coordinate like d="M 123.456789 456.789012" becomes d="M 123.46 456.79". The rounding error is sub-pixel on any display — completely invisible at normal viewing sizes.

At compress level ≥ 60: Common SVG default attribute values are stripped: fill="black", stroke="none", fill-opacity="1", stroke-width="1", visibility="visible", display="inline", overflow="visible". These are all browser defaults — removing them changes nothing visually but can save 3–10% on SVG files with many elements.

Where SVG Bloat Comes From

SVG editors add metadata, editor state, and namespace declarations that are invisible to the browser but bloat the file significantly. Here's a real before/after from an Inkscape export.

<!-- BEFORE: Inkscape SVG (bloated, 4.2 KB) --> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.0.dtd" xmlns:dc="http://purl.org/dc/elements/1.1/" width="200" height="200"> <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666" .../> <metadata><dc:creator>Inkscape 1.3</dc:creator></metadata> <!-- Created by Inkscape, exported 2024-01-15 --> <circle cx="100.000000" cy="100.000000" r="80.000000" fill="black" stroke="none" visibility="visible" display="inline"/> </svg>
<!-- AFTER: Same SVG, compressed (0.9 KB — 79% smaller) --> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><circle cx="100" cy="100" r="80"/></svg>
📝

Inkscape Metadata

Inkscape stores document history, page setup, grid configuration, guide positions, layer state, and export settings inside <sodipodi:namedview> and <metadata>. Browsers discard all of it.

🎨

Illustrator Namespace Data

Adobe Illustrator adds xmlns:ai, xmlns:xlink, and xmlns:x namespaces plus internal AI-specific attributes. These serve round-trip editing purposes but add zero rendering value.

🔢

Excessive Decimal Precision

Vector editors often export coordinates to 6+ decimal places: M 45.678901 123.456789. On a 1000px SVG, the difference between 45.68 and 45.678901 is 0.00892px — completely sub-pixel.

📄

Redundant Default Attributes

Editors write every attribute explicitly even when it's the browser default: fill="black", stroke="none", fill-opacity="1". These are no-ops — removing them is equivalent to removing CSS rule color: inherit.

What Each Compress Level Does to Your SVG

Unlike JPEG or PNG where quality is a continuous spectrum, SVG compression is applied in tiers based on safety. Lower levels apply only unambiguously safe removals; higher levels add progressively more aggressive optimizations.

1

Levels 1–29 (Safe — Zero Risk): Removes all metadata, editor namespace content, XML prolog, comments, and collapses whitespace. No data that affects rendering is touched. Always safe. Expected savings: 30–70% on Inkscape/Illustrator exports.

2

Levels 30–59 (Safe — Sub-Pixel Rounding): Applies all Level 1 passes, plus reduces numeric coordinate precision to 2 decimal places. The maximum rounding error is 0.005 units — invisible on any display. Recommended for all production SVGs where accuracy isn't being measured programmatically. Additional savings: 5–15%.

3

Levels 60–100 (Aggressive — Default Value Stripping): Applies all previous passes plus removes 9 categories of default attribute values. Safe for browser rendering. May affect programmatic attribute-reading code that checks for fill="black" explicitly rather than checking computed styles. Additional savings: 3–10%.

Recommended level for most SVGs: 45–65. This gives you whitespace stripping, metadata removal, and precision reduction (the three biggest savings categories) while staying well clear of any edge cases. Use level 1–29 only if you need to preserve comments or metadata for documentation purposes.

This Tool vs SVGO: Which to Use When

SVGO (SVG Optimizer) is the Node.js industry standard for SVG compression. This browser tool uses a different approach — pure regex-based text transformation that runs entirely in the browser with no install required. Here's how they compare.

FeatureThis ToolSVGO (CLI)
InstallationNone — browser-basednpm install -g svgo
Privacy100% local — never uploadedLocal CLI (also private)
Batch processingYes — drag multiple filesYes — glob patterns
Metadata / comment removalYesYes
Path data optimizationNo (no path rewriting)Yes — full path simplification
Unused defs removalNoYes
Shape mergingNoYes
Typical savings (Inkscape SVG)40–75%50–85%
Risk of breaking SVGsVery low (text transforms only)Low-medium (path rewriting can fail)
CI pipeline integrationNoYes — svgo CLI flags

Rule of thumb: Use this tool for quick one-off compression of Inkscape or Illustrator exports where 40–70% savings is sufficient. Use SVGO in CI pipelines, build systems, or when you need maximum savings including path-data optimization. SVGO's --preset=safe flag is recommended for production pipelines to avoid breaking complex SVGs.

SVG Compression Best Practices

Getting the most out of SVG compression requires understanding both the format and the toolchain. These tips apply to any SVG optimizer, not just this tool.

1

Compress after exporting from your editor, not before. Compressing a source SVG you're still editing removes the editor metadata needed for round-tripping. Always keep the original Inkscape/Illustrator file and compress a copy for deployment.

2

Combine with gzip on the server side. SVGs are text — they compress 60–80% further with gzip or Brotli. An SVG that's already been minified by this tool and then served with gzip can be 90%+ smaller than the original Inkscape export. Configure your web server to gzip SVG files (Content-Type: image/svg+xml).

3

Inline small SVGs in HTML/CSS. SVGs under ~1 KB can be base64-encoded and inlined directly in CSS as background-image: url("data:image/svg+xml,...") or embedded inline in HTML as <svg>...</svg>. This eliminates the HTTP request entirely — better for Core Web Vitals than even a well-compressed separate file.

4

Use viewBox instead of fixed width/height for responsive SVGs. An SVG with viewBox="0 0 200 200" and no width/height scales perfectly to any container via CSS. Fixed-dimension SVGs must be re-exported at different sizes for different use cases.

5

Check your SVG renders correctly after compression. Use the split-view preview in this tool to compare before and after. If a path disappears or text shifts, that SVG had structure the optimizer didn't handle safely — use a lower compress level.

About Compress SVG Online

Minify and compress SVG files in your browser — no upload, no server, complete privacy. Compress SVG Online strips XML comments, collapses whitespace, and removes redundant formatting from SVG code, reducing file size by 10–35% while keeping the visual output pixel-perfect identical.

SVG files exported from design tools like Adobe Illustrator, Figma, and Inkscape often contain extensive formatting whitespace (to make the code human-readable), comment blocks, and editor-specific metadata that browsers entirely ignore when rendering. Stripping this overhead makes SVG files faster to transfer and parse without any change to how they look or animate.

Drop any number of SVG files — icons, logos, illustrations, animations — and the tool processes them instantly using pure JavaScript string manipulation. No server roundtrip, no third-party API, no data leaves your device. Download results individually or as a ZIP archive.

Features

  • Comment stripping — removes all XML/HTML comment blocks () that add code overhead without visual effect
  • Whitespace collapse — multiple consecutive spaces, tabs, newlines collapsed to single space where allowed
  • Tag whitespace removal — spaces between > and < tags removed for compact single-line output
  • CSS whitespace cleanup — spaces around { } ; : , in embedded style blocks normalized
  • 100% browser-local — pure JavaScript minification, no upload, works offline, SVG code never leaves your device
  • Lossless output — visual output is identical; only code overhead is removed, never SVG paths or attributes
  • Unlimited batch — process entire SVG icon libraries at once with per-file progress and savings display
  • Before/After preview — visual diff panel shows original vs minified SVG rendering side by side
  • Batch ZIP download — download all minified SVG files in one archive

How to Use

  1. Drop SVG files. Drag SVG vector files onto the drop zone or click Browse. Any number accepted.
  2. Review settings. SVG output is always SVG — vector format is preserved. The compress level does not change SVG visual quality (compression is always full stripping of comments and whitespace).
  3. Compress All. Click the button to process. Each SVG is minified in the browser instantly.
  4. Preview. Click any result to see before/after rendering comparison — confirm visual output is identical.
  5. Download. Individual download per file, or Download ZIP for the full batch.

Examples

Example 1 — Icon library cleanup: 120 SVG icons exported from Figma (avg 3.2 KB each) → minification → avg 2.4 KB each → 25% savings → faster browser parsing for icon sprite sheets.

Example 2 — Illustrator logo export: Complex logo SVG exported from Adobe Illustrator (42 KB with formatting) → minified → 28 KB → 33% savings → comments and whitespace removed, identical visual.

Example 3 — Website SVG assets: 30 SVG illustrations (avg 18 KB each) → batch minify → avg 13 KB each → faster page loads across all devices.

Benefits

  • Lossless optimization — visual output is always identical; only code overhead that browsers ignore is removed.
  • Instant processing — pure JavaScript minification processes SVGs in milliseconds with no server wait.
  • Batch efficiency — clean an entire SVG asset library in one session; no per-file command-line tools needed.

Frequently Asked Questions

How is SVG compression different from raster image compression?
SVG is a vector format — it stores geometric shapes, paths, and text as XML code, not pixels. Compression for SVG means reducing the XML file size by removing unnecessary code: comments, whitespace between tags, redundant default attributes, editor-generated metadata, and empty elements. Unlike JPEG/PNG, SVG compression is lossless — the visual output is identical, only the code overhead is removed.
What does this tool remove from SVG files?
The minifier removes: (1) XML/HTML comments (<!-- ... -->), (2) multiple consecutive whitespace characters collapsed to single spaces, (3) whitespace between closing > and opening < tags, (4) spaces around CSS punctuation characters { } ; : ,. These four optimizations alone typically reduce SVG file size by 10–30%.
How much smaller will my SVG be after compression?
SVG files exported from design tools (Illustrator, Figma, Inkscape) often contain large amounts of whitespace, comments, and tool-specific metadata. Minification typically achieves 10–30% reduction. Complex SVGs with many paths and gradients see less gain; icon-sized SVGs with lots of whitespace from export can see 25–35% reduction.
Does SVG compression affect the visual output?
No — SVG minification is completely lossless for the visual output. The geometric paths, colors, gradients, and animations are not modified. Only whitespace formatting and comments (which browsers ignore when rendering) are removed. The SVG will look and animate identically after minification.
Can I compress SVG files in batch?
Yes — drop any number of SVG files and they all process simultaneously. Each file is minified independently. Real-time per-file progress shows original size, minified size, and percentage saved. Download all results as a ZIP or save files individually.
What is the best way to reduce SVG file size beyond whitespace stripping?
For deeper SVG optimization beyond what this tool does: (1) Remove invisible layers and hidden elements before export. (2) Simplify paths with fewer anchor points. (3) Use Inkscape's "File > Clean Up Document" before exporting. (4) For logos, consider converting complex gradients to simpler fills. This tool handles the final whitespace/comment cleanup step.
Will embedded JavaScript or CSS in SVG be removed?
No — only comments and redundant whitespace are removed. Embedded <script>, <style>, and all SVG content (paths, shapes, text, gradients, animations) are fully preserved. Your interactive SVGs and CSS-animated SVGs will continue to work identically after minification.
Can I use this to clean SVG exported from Figma or Adobe Illustrator?
Yes — design tool exports are a primary use case. Figma exports are generally clean but may have metadata. Adobe Illustrator SVG exports often contain extensive XML namespaces, comments, and formatting whitespace that can add 20–40% to the file size. This tool removes the excess code efficiently.

More Image tools

View All

Compress GIF Online

Compress GIF images online for free — convert GIF to WebP, JPEG, or PN...

Compress JPG Online

Compress JPG and JPEG images online for free with zero upload. Batch c...

Compress WebP Online

Compress WebP images online for free — no upload required. Reduce WebP...

Compress TIFF Online

Compress TIFF images online for free — convert TIFF to JPEG, PNG, or W...

Compress PNG Online

Compress PNG images online for free using color quantization — same te...