Minify SVG markup with SVGO in your browser — see byte savings live, verify the result visually, and copy or download the optimized code.
Content last reviewed
416 characters · 9 lines
Drop in the raw code exported from Figma, Illustrator, or any design tool.
Original size, optimized size, and percentage saved appear in the sidebar instantly.
Switch to the Visual check view to confirm the icon looks identical, then copy or download the result.
Editor cruft contributes nothing to rendering and is stripped entirely; the paths survive untouched.
Input
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<!-- exported comment -->
<path d="m18 16 4-4-4-4" />
<metadata><creator>Design Tool</creator></metadata>
</svg>Output
A minified single-line SVG with the comment and metadata element removed and the viewBox intact — the sidebar reports the exact bytes savedSVGs exported from design tools carry a surprising amount of dead weight: editor metadata, comments, empty groups, redundant attributes, and path coordinates specified to eight decimal places. None of it renders — all of it ships to your users. This optimizer runs your markup through SVGO, the industry-standard SVG optimizer, directly in your browser and shows exactly how many bytes it saved.
Paste the raw code (a sample icon is preloaded so you can see the effect immediately) and the optimized version appears live alongside byte counts and the percentage saved. SVGO's default preset runs in multipass mode, stripping comments, metadata, and editor cruft, collapsing redundant attributes, and reducing path precision — while preserving the viewBox, so the graphic still scales correctly. Design-tool exports routinely shrink 40–70%.
Because optimization can occasionally change how an edge-case SVG renders, the tool builds verification in: a Visual check view renders the original and optimized versions side by side on a checkerboard background, so a difference is immediately visible before you ship anything. Everything happens client-side — proprietary logos and unreleased design assets never leave your machine — and the output can be copied to the clipboard or downloaded as optimized.svg, ready to inline into a component or commit to your icon set.
Paste your raw SVG markup into the Raw SVG panel (a sample with removable comments and metadata is preloaded to demonstrate).
Optimization runs automatically — the sidebar shows the original size, optimized size, and percentage saved in bytes.
Switch the view toggle to Visual check to render the original and optimized versions side by side; they should look identical.
Back in Code view, copy the optimized markup or download it as optimized.svg.
If the input cannot be parsed, an error appears in the output panel — fix the markup (a truncated paste is the usual cause) and it re-optimizes instantly.
The standard preset in multipass mode — the same optimizer used in professional build pipelines, running in your browser.
Original bytes, optimized bytes, and percentage saved update as you edit the input.
Render both versions on a checkerboard background to confirm nothing visible changed before shipping.
The optimization keeps the viewBox attribute, so icons continue to scale responsively.
Take the result to the clipboard for inlining, or save it as optimized.svg.
Strip Figma, Illustrator, and Sketch metadata before committing icons to a codebase.
Reduce the markup weight of icons embedded directly in HTML or JSX components.
Normalize and minify a batch of icons one by one to a consistent, lean baseline.
Tidy a logo's markup before converting it with the SVG to Image Converter or Favicon Generator.
Your markup is parsed and rewritten by SVGO's default plugin preset, run in multipass mode so plugins re-apply until no further savings appear. The preset removes comments, metadata, editor namespaces, hidden and empty elements, and default-valued attributes; merges and minifies styles; and rounds path data to sensible precision. Byte counts are measured on the actual text before and after.
The Visual check view renders each version as an image from a data URL — a rendering path that cannot execute scripts, so even untrusted SVG is safe to preview. If SVGO cannot parse the input, the error is shown in place of the output rather than producing broken markup.
Raw SVG code from any source. Input is pasted rather than uploaded as a file; output downloads as optimized.svg.
Toggle the right panel between the optimized markup and a side-by-side rendering of both versions.
Drag the divider between panels, toggle word wrap, or expand either panel fullscreen.
The input is not parseable SVG — usually a truncated paste or a fragment missing its root svg element. Re-copy the complete markup from the source.
Rare, but possible when the source depends on something the default preset removes — editor-specific attributes or unusual structures. Use the Visual check to catch it, and keep the original if it happens.
Hand-written or already-optimized SVGs have little cruft to remove. The dramatic 40–70% reductions come from raw design-tool exports.
fill="currentColor" — set it in the source before optimizing.The tool applies SVGO's default preset without per-plugin configuration — there are no toggles for precision level or individual plugins, so edge cases that need custom SVGO configs are better served by running SVGO locally. Input is paste-only (no file upload), one SVG at a time. Optimization is not guaranteed lossless for SVGs that depend on comments, editor attributes, or scripts — the Visual check exists precisely because "almost always identical" is not "always."
Parsing, optimization, and preview all run in your browser — pasted markup is never uploaded or stored, which makes the tool safe for unreleased brand assets and client work.
Always glance at the Visual check before shipping — it takes two seconds and catches the rare rendering change.
Optimize icons before committing them, so the repository never accumulates design-tool cruft.
Use fill="currentColor" in sources you plan to recolour with CSS, and confirm it survives optimization.
Keep the original export if the SVG contains scripted or animated behaviour — optimize only static graphics.
Expect big savings on tool exports and small ones on hand-written SVG; both are correct outcomes.
Optimize at the boundary: the moment an export leaves the design tool and enters your project is the right time to strip it, so bloat never lands in version control. Pasting each icon through this tool during handoff takes seconds and keeps diffs clean.
Standardize what optimization can't decide for you. Decide as a team whether icons use currentColor, whether they carry width/height attributes or rely on CSS sizing, and what viewBox convention you use — the optimizer preserves structure but doesn't impose your conventions.
For build-time automation across hundreds of files, graduate to SVGO in your bundler config with the same preset — this tool is the interactive, inspect-what-changed version of exactly that step.
Optimization uses the svgo/browser build with the preset-default plugin set and multipass enabled, computed in a memoized pass on each input change. Sizes are measured as Blob byte lengths of the input and output strings. Previews render via data:image/svg+xml URLs inside img elements, which prevents script execution. Parse failures surface the SVGO error message in the output panel's error state.
Front-end developers and UI designers who move icons from design tools into codebases; performance-minded engineers trimming inline SVG weight; and anyone maintaining an icon set who wants build-pipeline optimization with a visual safety check, without setting up the pipeline.
Almost never — the default preset removes only non-rendering content like comments, metadata, and redundant attributes. The Visual check view exists for the rare exceptions: compare both versions side by side, and keep the original if anything differs.
Design-tool exports typically shrink 40–70% because they carry heavy metadata; hand-written or pre-optimized SVGs see much smaller gains. The sidebar reports your exact numbers per file.
Yes — the viewBox is kept so the graphic continues to scale responsively. That is called out in the sidebar because removing it is the classic way naive minifiers break icons.
No — it processes one pasted SVG at a time. For batch optimization across a project, run SVGO with this same default preset in your build pipeline; this tool is the interactive equivalent.
No. SVGO runs as a browser library on your machine; nothing you paste is transmitted or stored.
The preset can remove or rename IDs and classes it considers unused, since it cannot see your external CSS or JavaScript. For icons targeted by external code, re-apply the hooks after optimizing or leave those files unoptimized.