SVG Optimizer
Remove comments, metadata, and editor artifacts from SVG files. Preview the result instantly.
No data sent to serverRelated Tools
What is SVG Optimization?
SVG (Scalable Vector Graphics) is an XML-based vector image format defined by the W3C SVG specification. Unlike raster images (PNG, JPG), SVG describes shapes as math: paths, circles, polygons. This makes SVG infinitely scalable and tiny for icons. But SVG files exported from design tools come with massive overhead — editor metadata, comments, imprecise coordinates — that browsers don't need to render. Optimization strips this dead weight.
Why SVG matters for performance
An icon set with 50 icons can easily be 200 KB unoptimized. After SVG optimization plus gzip, the same icons fit in 25 KB. Inlining critical icons (sprites or React components) avoids extra HTTP requests entirely. Smaller SVG = faster First Paint + better LCP scores + reduced CDN costs.
What gets removed
This tool removes XML declarations, HTML/XML comments, <title>, <desc>, and <metadata> elements, editor-specific attributes (Inkscape's inkscape:*, Sodipodi's sodipodi:*), empty attribute values, and reduces decimal precision to 2 places. Typical savings: 20–60% before gzip; after gzip, 70–85% total reduction from original.
How to Use
- Paste your SVG code into the input area, or click Sample to load an example.
- Click Optimize SVG (or press
Ctrl+Enter) to compress. - The optimized output appears on the right with file size savings shown above.
- Use the Preview section to visually verify the SVG still looks identical — toggle between original and optimized to compare.
- Click Copy to copy the optimized SVG to clipboard.
Privacy: All optimization runs in your browser. SVG content is not uploaded.
SVG Optimization Techniques
1. Remove editor metadata
Adobe Illustrator adds <sodipodi:namedview> and inkscape XML namespaces. Figma exports add comment blocks. None of this affects rendering. Strip everything outside the <svg> root and inside (except visual elements).
2. Reduce coordinate precision
Designers export with 6+ decimal places (3.14159265). Browsers don't render at that precision — 2 decimals (3.14) is visually identical for screen rendering. d="M3.14159265 12.99999" → d="M3.14 13" can save 10–20% alone.
3. Convert paths to simpler shapes
A 4-segment path that's actually a rectangle should be a <rect> — much smaller. A 360-segment path that's a circle should be <circle>. Modern tools like SVGO detect this; this tool focuses on cleanup that doesn't change semantics.
4. Optimize fill / stroke / styles
Inline style="fill:red" can become attribute fill="red" (5 chars saved). Default values (opacity="1", stroke-width="1") can be dropped. Identical fills across many elements can be hoisted to a parent <g>.
5. Strip unused IDs and namespaces
IDs are needed only when referenced by url(#id) or xlink:href. Unreferenced IDs add bytes for no purpose. Same for unused XML namespaces (xmlns:xlink if no xlink:href appears).
Beyond what this tool does
For build-pipeline optimization, use SVGO (svgo.dev) — the de facto standard with 40+ plugins for advanced transformations: path simplification, color value normalization, transform consolidation, and more. SVGO is integrated into webpack-svg-loader, vite-plugin-svgo, imagemin-svgo. This tool is the quick browser version for one-off optimization.
Common Pitfalls
1. Removing viewBox breaks scaling
The viewBox attribute defines the coordinate system. Without it, SVG renders at fixed pixel size and won't scale responsively. Some over-aggressive optimizers strip it — never do this. viewBox="0 0 24 24" is essential for scalable icons.
2. Stripping title hurts accessibility
For decorative icons (next to text labels), removing <title> is fine. For standalone meaningful images, <title> is the SVG equivalent of alt text — screen readers announce it. Strip conditionally based on context.
3. Over-precision loss on transforms
Coordinates like 0.000001 can be safely rounded to 0, but matrix(1.000001 0 0 1 0 0) rounded to matrix(1 0 0 1 0 0) is exactly the identity matrix and can be removed entirely. Aggressive rounding can cause subtle mis-alignment if used on already-quantized coordinates from pixel-art SVG.
4. CSS animations referencing IDs
If your CSS has #my-icon path { animation: ... }, stripping the unused id="my-icon" breaks the animation. Always optimize SVGs after they're integrated into CSS, not before — or run a final visual regression test.
5. Inline event handlers / scripts
onclick="..." attributes inside SVG are valid but break Content Security Policy. Some optimizers remove them — usually you want this for security, but if you relied on them, you'll need to add event listeners in JS instead.
FAQ
Will optimization break my SVG?
This tool only removes non-visual metadata and editor artifacts — visual output should be identical. Always use the Preview to verify before deploying. For animation- or CSS-dependent SVGs, run a visual diff after optimization.
Should I remove <title> tags?
For decorative icons, yes. For standalone images with accessibility requirements, keep <title> — screen readers announce it like alt. Default to keeping unless you're sure the SVG is purely decorative.
What's the difference between this and SVGO?
SVGO (svgo.dev) is the industry-standard Node.js library with 40+ plugins for deep optimization. This tool is the quick browser version for one-off cleanup — same core ideas, less aggressive. For a build pipeline, integrate SVGO via webpack/vite/esbuild plugins.
Can I optimize multiple SVGs at once?
Not in this browser tool — paste one at a time. For batch processing, use npx svgo --folder=./icons or integrate SVGO into your build.
Should I inline SVGs or use <img>?
Inline SVG (in HTML or as React components) avoids extra HTTP requests and allows CSS styling. <img> tags allow caching across pages and lazy loading. Rule: inline icons (under 1 KB), <img> for larger illustrations.
Do I need to gzip after optimizing?
Yes — these are complementary. Optimization removes redundant tokens at the source level. Gzip/Brotli compresses the optimized bytes further. Most CDNs (Cloudflare, Fastly, Vercel) gzip text content automatically. Verify with DevTools → Network → Content-Encoding: gzip / br.
⚠️ Reference Only
Output is generated based on your input and is provided for reference. Results may vary depending on your specific use case, edge cases, or environment-specific behavior. We do not guarantee accuracy of conversions, validations, or computed values.
Always verify critical outputs against official documentation or production environments. We are not responsible for any decisions or losses based on these tool results.
📖 Related Guides
HTTP Caching — Cache-Control, ETag, and CDN
Production caching patterns. RFC 9111, stale-while-revalidate, the bugs that cost real money.
UUID v4 vs ULID — Which to Choose?
Compare UUID v4 and ULID for distributed systems. Performance, sortability, and use cases.
JWT Anatomy — Header, Payload, Signature
Understand JWT structure, claims, and signing algorithms. Security best practices.