SVG Cleaner (Remove Metadata and Comments)
This SVG cleaner removes common bloat like metadata, comments, editor namespaces, XML declarations, and other extra tags so your SVG is smaller, safer to preview, and easier to reuse in web apps, icon systems, and design pipelines. Paste SVG markup or upload a file, verify the preview, and export a cleaned SVG. Processing runs entirely in your browser.
Remove metadata, comments, editor junk, and other bloat from SVG files. Runs fully client-side.
When to use this instead of the minifier: choose the cleaner when you want safer markup, fewer editor leftovers, and script-related cleanup before worrying about the smallest possible file size.
Quick workflow
Use this checklist to get a clean export fast, without breaking references like gradients or clip paths.
- 1) Start with SafeSafe removes obvious bloat and strips risky script behavior while keeping ids/defs intact.
- 2) Compare previewIf the preview changes after cleaning, step back to Normal or disable aggressive options like id removal.
- 3) Clean for your targetFor icons and web apps, light minification helps. For design handoff, keep readability and ids.
- 4) Export and reuseCopy for inline SVG or download to commit to your repo and ship as assets.
Clean SVGs for Figma import and editing
Use this wrapper when an exported logo, icon, UI illustration, or design-system asset has markup clutter before Figma import or design handoff.
Before Figma import
Remove metadata, comments, editor namespaces, XML wrappers, and unsafe script behavior before bringing the SVG into a design file.
Editing workflow checks
Keep viewBox, fills, strokes, gradients, masks, and useful groups intact, then review the cleaned preview before importing.
What cleanup cannot promise
This cleaner does not guarantee editable layers in Figma. Complex masks, filters, fonts, and grouped artwork can still need manual review.
Start with Safe or Normal cleanup for Figma assets. Use Aggressive only after comparing the preview because removing ids or defs can break gradients, masks, or reusable references.
What gets removed
The cleaner targets common export bloat and optional risky behaviors. It does not “redesign” your SVG.
- ✓Comments and metadata: XML comments,
<metadata>, RDF blocks, and editor notes. - ✓Editor namespaces: common prefixes from Illustrator/Inkscape that inflate the file and add noise.
- ✓XML/DOCTYPE wrappers: optional removal for cleaner embeds and fewer strict-parser warnings.
- iSafety stripping (optional): removes
<script>,on*handlers, and javascript: URLs. - ✓Whitespace cleanup: trims extra whitespace and optionally lightly minifies markup for smaller output.
What we keep untouched
Rendering relies on references. The safest cleaner avoids touching the parts that frequently break.
- ✓Geometry and shape content (paths, rects, circles, groups)
- ✓Styling that affects rendering: fills, strokes, gradients, patterns, filters
- ✓Reference systems: defs, symbols, clip-paths, masks, and
url(#id)links (unless you choose Aggressive options) - iIf you enable aggressive id/defs removal, verify preview before exporting. That is the #1 cause of “broken” SVGs.
Mode behavior (what each one is for)
Removes comments, obvious metadata, common editor prefixes, and optional XML/DOCTYPE wrappers. Safety stripping removes script behavior. Keeps ids, defs, and structure intact.
Similar to Safe, with more consistent whitespace cleanup for web reuse. Usually the best default for icons and inline SVG in apps.
Maximum reduction. Can remove ids, unused defs, and extra attributes. Use only after confirming the cleaned preview matches the input.
Cleaner vs minifier
Use the SVG cleaner when the file has comments, metadata, editor namespaces, unsafe script behavior, or confusing structural clutter. Use the minifier when the SVG already renders correctly and your main goal is reducing file size for a website, icon set, or app bundle.
The cleaner can still reduce bytes, but its first job is safer, easier-to-review markup. After the cleaned preview looks right, the minifier is a better next step for compact spacing and shipping-size tweaks.
Troubleshooting checklist
You removed ids or defs. Keep ids/defs enabled and avoid aggressive removal on files that use url(#...) references.
Same root cause: broken references. Switch to Safe/Normal and re-run, or disable any option that removes ids.
Ensure the SVG has a valid viewBox. Missing viewBox leads to odd scaling behavior in HTML and React wrappers.
Keep safety stripping on. SVGs can contain script blocks and event handlers. Stripping them reduces risk during preview and embedding.
Figma SVG cleanup workflow
SVG cleaner for Figma import, editing workflow, and design handoff
Use this page when an exported SVG needs metadata, comments, editor namespaces, or unsafe markup removed before Figma import. It helps make the file easier to inspect, but it does not guarantee editable layers.
Best for
- Figma import cleanup for SVG icons, logos, UI artwork, and design-system assets.
- Design handoff where previewing the cleaned SVG matters before sharing.
- Users who need safer markup without changing the SVG into a raster image.
Settings to try
- Start with Safe or Normal cleanup before importing into Figma.
- Preserve ids, defs, gradients, masks, groups, fills, and strokes unless preview proves they are unused.
- Use SVG minifier only after the cleaned preview still matches the source.
Useful limits
- Cleaning does not certify Figma compatibility or guarantee editable layers.
- Fonts, masks, filters, gradients, and grouped artwork can still import differently.
- Confirm final appearance inside Figma before sharing or publishing.
Related tools
Need help choosing?
Read the concise workflow, preset, settings, and troubleshooting docs without adding clutter to the converter.
❓FAQ
Will this make every SVG editable in Figma?+
No. Cleaning removes markup clutter and unsafe behavior, but it does not guarantee editable layers. Inspect the imported result in Figma, especially masks, filters, gradients, fonts, and grouped artwork.
What should I clean before Figma import?+
Metadata, comments, editor namespaces, XML wrappers, and unsafe script behavior are good cleanup targets. Preserve viewBox, ids, defs, fills, strokes, masks, and gradients unless the preview proves they are unused.
Is this Figma SVG cleaner private?+
Yes. Cleaning runs in your browser, so SVG markup is not uploaded to a server.
Which cleanup mode should I use for Figma assets?+
Start with Safe or Normal. Aggressive cleanup can be useful for controlled icon sets, but it can also remove references that affect the imported appearance.
