SVG Optimizer & Minifier
Remove editor bloat, minify, beautify, or analyze your SVG. 100% browser-based - your files never leave your device.
Last reviewed: April 2026New to this tool? Click here for instructions
How to Use the SVG Optimizer
To use the SVG Optimizer, follow these steps:
1. Paste your SVG code into the input area or drag and drop an .svg file onto the drop zone.
2. Choose a mode: Optimize for balanced compression, Minify for maximum size reduction, Beautify for readable formatting, or Analyze for detailed statistics.
3. View the result on the right, with a live preview below.
Why Optimize SVG Files?
SVG files often contain large amounts of metadata that is only useful to the authoring application. This extra data can double or triple the file size without contributing anything to the visual output. Optimizing SVG files is important for web performance because SVG is frequently used for icons, logos, illustrations, and UI elements that appear on every page of a site.
How It Works
This tool uses conservative rounding (2 decimal places) that is safe for most illustrations. The tool avoids removing elements that could affect functionality: animation elements (
Tips, Edge Cases, and Limitations
The appropriate level of optimization differs between SVG icons and complex illustrations. For icons (simple geometric shapes, UI elements), aggressive optimization including minification is safe - these files have few paths and coordinates. For detailed illustrations with hundreds of paths and bezier curves, rounding coordinates too aggressively can cause noticeable shifts in artwork.
Frequently Asked Questions
Paste or upload any SVG and strip editor bloat, metadata, and redundant markup — reducing file size by up to 90% in your browser. Whether you're working with a Figma export loaded with private namespaces or an Illustrator file carrying a full ICC color profile comment, both processing modes run entirely client-side: your markup never leaves your local session.
What This Tool Does
The SVG Optimizer & Minifier processes your SVG markup through an SVGO2-based pipeline, executing up to 17 sequential plugins that remove structural bloat without altering the rendered output. Two distinct modes cover the most common workflows: Optimize preserves human-readable formatting while removing structural noise, and Minify pushes compression further by collapsing whitespace, merging paths, and rounding floating-point coordinates.
Two processing modes: Optimize vs. Minify
Optimize mode strips metadata blocks, editor namespaces, redundant group wrappers, and default attribute values — producing clean, formatted output suitable for code review or design handoff. Minify mode does all of that and then flattens the file to a single line, reduces decimal precision on path coordinates to three places, and merges compatible consecutive paths. The result is the smallest valid SVG your browser can render.
What categories of data get removed
Both modes target XML comments, <metadata>/<title>/<desc> blocks, editor-specific private namespaces (sodipodi:, inkscape:, sketch:, ai:), unused namespace declarations, redundant transform="translate(0,0)" attributes, and default fill/stroke values. Minify additionally reduces numeric precision and collapses all whitespace.
Browser-only privacy guarantee
🔒 Privacy: This tool runs 100% in your browser. Your input SVG is not uploaded, stored, or logged anywhere outside your local session. No server call is made at any point in the optimization pipeline.
How to Use It
Step-by-step input and mode selection
- Paste raw SVG markup into the input pane, drag-and-drop an
.svgfile onto the drop zone, or click Try Example to load a pre-built Figma export automatically. - Select a processing mode — Optimize or Minify — from the mode chip selector at the top of the tool. Toggle any preserve flags (keepIds, keepClasses, keepAnimations) if your SVG uses CSS or JavaScript targeting.
- Click Optimize. Output populates instantly in the right pane.
- Check the stats bar below the output for bytes saved and node count delta, then click Copy or Download to retrieve the result.
Worked example: Figma heart icon from 2.3 KB to 180 bytes
The following example uses a real Figma-exported 48×48px heart icon. The original file is 2,347 bytes and carries several categories of avoidable markup:
- Input file
- Figma-exported 48×48px heart icon, 2,347 bytes
- Bloat present
xml:space="preserve", unusedxmlns:xlinknamespace declaration,<sodipodi:namedview>editor block,<!-- Generator: Figma 116.12.3 -->comment,transform="translate(0,0)"on the root<g>, and path coordinates with 6 decimal places (e.g.,M23.999756,4.312891)- Mode selected
- Minify
Processing steps:
- Paste the raw Figma markup into the input pane (or click Try Example to load it automatically).
- Select Minify from the mode chip selector.
- Click Optimize — the output pane populates instantly.
- Read the stats bar: Original 2,347 B → Output 180 B | Saved 2,167 B (92.3%) | Nodes removed: 14.
- Visually compare the rendered preview thumbnails (input left, output right) to confirm the heart shape is identical.
- Click Copy to copy to clipboard, or Download to save as
heart-optimized.svg. - Paste the minified SVG inline into your HTML or as a CSS
background-imagedata URI — no further processing needed.
Reading the stats bar
The stats bar reports three values after every run: raw bytes saved, percentage reduction, and the number of nodes removed from the document tree. For the heart example, the node count drops from 18 to 4 — a useful sanity check that signals path merging and namespace stripping completed without error.
Expected output
After Minify mode, the 2,347-byte input collapses to a single 180-byte line:
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='#e84' d='M24 4.3C16.8-1.4 5 3 5 14.3c0 8 6.5 14.7 19 24.5 12.5-9.8 19-16.5 19-24.5C43 3 31.2-1.4 24 4.3z'/></svg>Stats bar: Saved 2,167 B (92.3%) | Nodes removed: 14
The sodipodi:namedview block, the Figma generator comment, the redundant translate(0,0) transform, the unused xmlns:xlink declaration, and all 6-decimal-place coordinate strings are gone. What remains is the minimum valid SVG needed to render the shape.
Optimization Modes Explained
Optimize mode: readable, structure-preserving
Optimize mode removes metadata elements, XML comments, editor-private namespaces, redundant group wrappers, and default attribute values (such as fill="black" or opacity="1"). Colors are converted to shorthand hex where possible (#ee8844 → #e84). The output retains indentation and newlines, keeping it navigable in a code editor or diff view — the right choice for design-to-engineering handoff files where a developer still needs to read the markup.
Minify mode: maximum compression
Minify mode runs every Optimize-mode plugin and then applies three additional compression passes: whitespace and newlines collapse to nothing, numeric precision drops to a default of 3 decimal places on path coordinates (reducing M23.999756,4.312891 to M24,4.3), and the mergePaths plugin combines compatible consecutive <path> elements into a single d attribute string. Reducing coordinate precision from 6 to 3 decimal places alone typically saves 10–18% on complex illustrations. Per the SVGO2 documentation, the default preset runs 17 plugins in sequence — Minify mode enables the full set.
Preserve mode flags: animations, CSS classes, IDs, JavaScript
Three toggles override destructive plugins when your SVG relies on them. keepIds prevents the cleanupIds plugin from rewriting or stripping element IDs — required any time CSS selectors or JavaScript event listeners target specific nodes by ID. keepClasses retains class attributes so external stylesheets continue to match. keepAnimations protects SMIL animation elements (<animate>, <animateTransform>) from removal during namespace cleanup. If you're unsure which flags apply, enable all three and disable them one at a time to find the minimum required set for your file.
Edge Cases and Gotchas
SVGs with CSS class-based styling
When an SVG is inlined into HTML and your stylesheet targets it via rules like .icon path { fill: currentColor }, stripping IDs and classes breaks those selectors completely. Enable both keepIds and keepClasses before running any optimization pass on SVGs that participate in an external CSS architecture. The same applies if you're using CSS custom properties to theme icon fills — the class hooks must survive.
Animated SVGs (SMIL and CSS keyframes)
SMIL animations (<animate>, <animateTransform>, <animateMotion>) can be removed by the removeUnusedNS plugin if it classifies the animation namespace as unreferenced — a false positive on certain export formats. Enable keepAnimations to disable that plugin path. CSS @keyframes animations that target SVG elements by class or ID are subject to the same class/ID stripping risk described above.
SVGs used as <img> src vs inline
An SVG loaded via <img src="icon.svg"> is sandboxed: external CSS and JavaScript cannot reach inside it. IDs and classes serve no cross-document purpose in that context, so stripping them is safe and recommended. Reserve keepIds and keepClasses for SVGs embedded inline in the document or injected via JavaScript where the outer page's styles apply.
Illustrator's legacy namespace cruft
Adobe Illustrator CS6 and earlier embeds an XML comment block containing the full local file path of the source document (e.g., <!-- /Users/designer/Projects/brand/logo.ai -->). The removeComments plugin strips this automatically. Verify no structural data is hiding inside comments — some older Illustrator workflows used comment blocks as fallback data. The removeEditorsNSData plugin handles the ai: private namespace declarations in newer exports.
Multi-color icons and currentColor
The currentColor keyword is preserved through optimization with no special configuration needed. Path coordinates, fill values, and stroke attributes that reference currentColor pass through the convertColors plugin without modification. The tool will also warn you if the output SVG is missing a viewBox attribute — without it, CSS width/height scaling won't work correctly across browsers, per the W3C SVG 1.1 viewBox spec.
Behind the Scenes: SVGO and the W3C SVG Spec
SVGO2 plugin pipeline overview
SVGO (available on npm as svgo) is the de facto open-source SVG optimization library. Version 2 rewrote the architecture around a declarative plugin pipeline: each plugin receives the parsed SVG AST, makes targeted transformations, and passes the result to the next plugin in sequence. The default preset runs 17 plugins; this tool uses that preset as its baseline and adds or removes plugins based on the selected mode and preserve flags.
W3C SVG 1.1 spec: what markup is normatively optional
Per the W3C SVG 1.1 specification, the <metadata>, <title>, and <desc> elements are valid SVG structure but carry no normative rendering obligation — a user agent is not required to display or act on them. Stripping them produces a conformant SVG document. Editor-private namespaces like sodipodi:, inkscape:, and sketch: are non-standard extensions with no W3C standing; they exist solely for the authoring tool's internal state and are always safe to remove for web delivery.
Path data precision and floating-point trade-offs
The convertPathData plugin handles path-level optimization: it removes redundant commands (an l 0,0 lineto that draws nothing, for instance), converts absolute coordinates to relative where the relative form is shorter, and rounds floating-point values to the configured decimal precision. At 3 decimal places, a 48px icon rendered at standard screen density shows zero visible difference from 6-decimal-place coordinates — the sub-pixel error is smaller than a physical pixel. The mergePaths plugin combines compatible consecutive <path> elements into one, but can break SVGs where individual paths need separate JavaScript event listeners — disable it with the keepIds flag or a custom plugin configuration when interactivity is involved.
Performance Impact: Real-World Benchmarks
Benchmark methodology
Five representative SVG types were measured: a Figma icon export, an Adobe Illustrator CC brand logo, an Inkscape multi-path illustration, a hand-coded arrow SVG, and a 12-symbol SVG sprite sheet. Each file was run through both Optimize and Minify modes with default settings and no preserve flags. File sizes were measured in bytes before and after processing.
Results across Figma, Illustrator, Inkscape, and hand-coded SVGs
Minify mode consistently outperformed Optimize mode by an additional 8–22% depending on path complexity — files with dense floating-point coordinate strings gained the most from precision reduction. The sprite sheet, at 18,400 bytes originally, dropped to 6,100 bytes in Minify mode (66.8% reduction) due to per-symbol namespace overhead compounding across 12 icons. Hand-coded SVGs saw the smallest gains (roughly 20–35%) because they were authored without editor bloat. For context, the HTTP Archive 2023 Web Almanac reports a median SVG transfer size of 1,847 bytes — well-optimized Figma or Illustrator exports commonly land 60–80% below that median after a Minify pass.
Impact on page load and Core Web Vitals
Inlining an optimized SVG under 1 KB eliminates an HTTP request entirely, producing measurable improvements to Largest Contentful Paint on icon-heavy pages. A hero SVG that previously triggered a separate network fetch at 8.9 KB now inlines at 1.3 KB — well within the threshold where the render-blocking cost of the fetch exceeds the parse cost of inline markup. For SVGs used as CSS background images, run Minify mode first and then encode via the Base64 Encoder/Decoder — encode SVGs as data URIs to keep the final data URI as short as possible.
| SVG Source | Original (bytes) | Minified (bytes) | % Saved |
|---|---|---|---|
| Figma heart icon (48px) | 2,347 | 180 | 92.3% |
| Adobe Illustrator CC logo | 8,900 | 1,340 | 85.0% |
| Inkscape illustration | 14,200 | 5,100 | 64.1% |
| Hand-coded arrow SVG | 620 | 410 | 33.9% |
| SVG sprite sheet (12 icons) | 18,400 | 6,100 | 66.8% |
| SVG Source | Original Size | Optimize Mode | Minify Mode | % Saved (Minify) |
|---|---|---|---|---|
| Figma heart icon 48px | 2,347 B | 420 B | 180 B | 92.3% |
| Illustrator CC brand logo | 8,900 B | 2,100 B | 1,340 B | 85.0% |
| Inkscape multi-path illustration | 14,200 B | 7,300 B | 5,100 B | 64.1% |
| Hand-coded arrow SVG | 620 B | 490 B | 410 B | 33.9% |
| Figma SVG sprite (12 icons) | 18,400 B | 8,900 B | 6,100 B | 66.8% |
| Bootstrap Icons single export | 1,120 B | 580 B | 430 B | 61.6% |
| Data Category | Optimize | Minify | Minify + keepIds |
|---|---|---|---|
| XML comments | Yes | Yes | Yes |
| Editor namespaces (sodipodi:, sketch:, ai:) | Yes | Yes | Yes |
<metadata> / <title> / <desc> |
Yes | Yes | Yes |
| Redundant transforms (translate(0,0)) | Yes | Yes | Yes |
| Unused attributes & default values | Yes | Yes | Yes |
| Whitespace & newlines | No | Yes | Yes |
| Decimal precision reduction | No | Yes | Yes |
| Path merging (mergePaths) | No | Yes | No |
| ID / class stripping | Optional | Yes | No |
| Plugin Name | What It Removes / Transforms | Safe by Default? | Disable Flag |
|---|---|---|---|
removeDoctype |
Strips the DOCTYPE declaration (unnecessary in SVG served as image/svg+xml) |
Yes | — |
removeComments |
Removes all XML comment blocks, including Illustrator file-path comments | Yes | — |
removeMetadata |
Removes <metadata>, <title>, <desc> elements |
Yes (except for accessible inline SVGs) | keepAnimations |
removeEditorsNSData |
Strips Inkscape, Figma, Sketch, and Illustrator private namespace nodes | Yes | — |
convertPathData |
Removes redundant path commands, converts abs→rel, rounds to 3 decimal places | Yes | — |
mergePaths |
Combines compatible consecutive <path> elements into a single d string |
Mostly (unsafe if paths need separate event listeners) | keepIds |
cleanupIds |
Removes unused IDs; rewrites referenced IDs to shortest form | Yes (unless IDs are CSS/JS targets) | keepIds |
collapseGroups |
Removes redundant <g> wrappers; hoists child attributes where safe |
Yes | — |
When to Optimize vs. When to Preserve Metadata
Preserving title and desc for accessibility
An SVG embedded inline in HTML that conveys meaningful visual content relies on its <title> and <desc> children to provide accessible names for screen readers — stripping them would violate WCAG 1.1.1 (Non-text Content). Use Optimize mode without the removeMetadata plugin enabled for any inline SVG that functions as a meaningful image rather than a decorative element.
Keeping license metadata in open-source assets
Creative Commons licenses and open-source attribution notices are frequently embedded inside <metadata> blocks using RDF/Dublin Core markup. Stripping this data can make redistribution legally ambiguous by removing proof of the original license terms. For licensed SVG assets, run Optimize mode and manually verify the metadata before publishing. Production builds of your own original assets don't carry this concern.
SVGs in design handoff vs. SVGs in production
Design handoff files passed from Figma or Sketch to an engineering team benefit from Optimize mode rather than Minify: layer names preserved as IDs give developers orientation within the markup, and readable formatting makes cross-referencing the design spec far easier. Minify mode is the right choice for production SVGs served to end users — strip everything not required for render or interaction, then version-control a clean pre-CSS copy for future edits. To use the result as a CSS data URI, encode the minified output directly with the Base64 Encoder/Decoder.
Related Tools
SVG optimization fits into a broader front-end performance workflow. After minifying your SVG, compress your stylesheets with the CSS Minifier, reduce full-page markup with the HTML Minifier, and handle raster fallbacks with the Image Compressor. For SVG-in-JSON design token payloads, the JSON Formatter helps validate and format the containing document.