/gi) || []; styleBlocks.forEach(function(block) { let cssMatch; while ((cssMatch = cssIdRegex.exec(block)) !== null) { allUrlRefs.push(cssMatch[1]); } }); // Also check for href attributes const hrefRegex = /href="#([^"]+)"/gi; let hrefMatch; while ((hrefMatch = hrefRegex.exec(optimized)) !== null) { allUrlRefs.push(hrefMatch[1].trim()); } const refSet = new Set(allUrlRefs); // Remove id attributes not in refSet (but preserve known important ones cautiously) optimized = optimized.replace(/\sid="([^"]+)"/gi, function(match, idVal) { if (refSet.has(idVal)) { return match; } return ''; }); } // 8. Minify inline CSS in style tags if (cleanCSS) { optimized = optimized.replace(/]*)>([\s\S]*?)<\/style>/gi, function(m, attrs, cssContent) { let cleaned = cssContent .replace(/\/\*[\s\S]*?\*\//g, '') // Remove CSS comments .replace(/\s+/g, ' ') // Collapse whitespace .replace(/\s*\{\s*/g, '{') // Remove space before/after { .replace(/\s*\}\s*/g, '}') // Remove space before/after } .replace(/\s*;\s*/g, ';') // Remove space around ; .replace(/\s*:\s*/g, ':') // Remove space around : .replace(/\s*,\s*/g, ',') // Remove space around , .replace(/;\}/g, '}') // Remove trailing semicolons before } .trim(); return '' + cleaned + '
No Login Data Private Local Save

Inline SVG Optimizer - Online Clean & Minify Embedded SVGs

Developer Tools Optimization inline minify optimizer SVG
41
0
0
0

Inline SVG Optimizer

Clean, minify & optimize embedded SVG code — reduce file size without losing quality

Free & Instant
2
Input SVG 0 B
Optimized Output 0 B
0 B
Original Size
0 B
Optimized Size
0 B
Bytes Saved
0%
Reduction
Live SVG Preview (rendered from optimized output)
SVG preview will appear here after optimization
✓ Copied to clipboard!

Frequently Asked Questions

What is an inline SVG and why should I optimize it?
An inline SVG is SVG markup embedded directly within HTML using <svg> tags — no external file needed. While convenient, inline SVGs often carry redundant metadata, editor comments, excessive decimal precision, and unnecessary whitespace from design tools like Figma, Illustrator, or Sketch. Optimizing strips this bloat, reducing HTML payload size, improving page load speed, and lowering bandwidth costs — all without altering the visual output.
How much file size reduction can I expect?
Results vary based on the SVG's complexity and its source. Simple icons may shrink 10–30%, while complex illustrations from design tools can see 40–70%+ reduction. The biggest gains come from stripping editor metadata, reducing excessive path precision (e.g., 12 decimal places → 2), and removing comments. Our real-time stats show your exact savings after each optimization.
Will optimization change how my SVG looks?
No — all our default optimizations are lossless for visual rendering. We only remove non-rendering elements (comments, metadata, editor data), reduce numerical precision to sensible levels (default 2 decimal places — more than enough for screen display), and shorten color hex codes to their CSS-equivalent 3-character forms. The live preview lets you verify the result instantly. For critical artwork, you can adjust precision or disable specific options.
What's the difference between SVG optimization and SVG compression (gzip)?
SVG optimization (what this tool does) removes redundant data from the SVG source code itself — comments, extra whitespace, unnecessary precision. This produces a smaller raw file. SVG compression (gzip/Brotli) is a separate layer applied by web servers during transmission. The two work best together: an optimized SVG compresses even better because there's less entropy. For inline SVGs embedded in HTML, optimization is especially important since they can't benefit from server-side gzip as standalone files.
Is it safe to remove unused IDs from my SVG?
This option is off by default because it requires caution. IDs in SVGs can be referenced by url(#id) in fills, clip-paths, masks, or by CSS selectors. Our tool analyzes references before removing any ID — but if your SVG interacts with external CSS or JavaScript, enable this only after testing. For standalone icons and illustrations, it's generally safe and can trim significant clutter from design-tool exports.
Can I use this tool for SVGs in React/JSX or Vue templates?
Absolutely! Paste the raw SVG markup (what lives inside your JSX {`...`} or Vue template), optimize it, then copy it back. The tool handles standard SVG syntax. For JSX-specific attributes like className or onClick, strip those before pasting since they're not part of the SVG spec — or keep them if they don't interfere with the optimization passes.
Why do design tools export such bloated SVGs?
Design tools (Figma, Illustrator, Sketch, Inkscape) prioritize editability over file size. They embed application-specific metadata, use extremely high path precision (for zoom-level accuracy), add comments marking layers, and include proprietary namespace attributes — all useful for round-tripping edits but dead weight in production. Our tool targets exactly these patterns to produce production-ready SVGs.
What does "Shorten Hex Colors" actually do?
In CSS and SVG, a 6-digit hex color like #ff8800 can be shortened to #f80 only when each channel's two digits are identical (#ff → #f, #88 → #8, #00 → #0). The two are visually identical in every browser. Our tool detects these patterns in fill, stroke, style attributes, and inline CSS — safely converting them to the shorter 3-digit form. Colors like #ff8040 stay unchanged since the channel digits differ.
🔧 Related Tools