Mon–Fri: 10:00 – 18:00 
Request a call 
SVG Optimizer
SVG files exported from Illustrator, Figma, or Sketch are full of metadata, comments, namespace declarations, and editor IDs that browsers don't need. This optimizer strips that cruft and minifies whitespace — typical reduction is 30-70% on hand-drawn icons, 10-30% on complex illustrations. Pure client-side, no upload.
SVGO (Node.js library) and SVGOMG (its web version by Google) are the gold standard — they have 50+ plugins for advanced optimization (path merging, transform collapsing, color value optimization, etc.). Our tool is a lightweight subset that covers the 80% case (metadata + whitespace removal). For complex illustrations, use SVGOMG; for quick icon cleanup, ours is faster.
Three common causes: (1) JavaScript inside the SVG depends on IDs our optimizer didn't remove but a CSS selector targets a removed attribute, (2) gradient or pattern IDs get stripped, (3) animation timing depends on IDs. Test the visual preview always — if broken, fall back to the original or use SVGOMG with conservative settings.
Inline for icons that need CSS color theming or animation (fill: currentColor works). Use external or background-image for SVGs that don't need styling, since the browser can cache them across pages. Optimized inline SVG is critical because it sits in your HTML — every kilobyte matters.
Icons should be under 1KB after optimization. Complex illustrations under 50KB. If a single SVG exceeds 100KB, consider whether it should be raster (PNG/WebP) instead — SVG is best for geometric or icon-like graphics, not photographs or complex shading.
Get a free UX review
Our senior designers review your site's UX, visual hierarchy, accessibility, and conversion flow — and send you a prioritised list of quick wins.