How to how to clean svg exports from figma and illustrator for production
- Step 1Standardise the export settings first — Reduce the cruft at the source. In Illustrator's SVG Options, set Styling to Presentation Attributes and uncheck 'Include' for unnecessary metadata. In Figma, exporting via 'Copy as SVG' tends to be cleaner than file export. Less in means less to scrub — but never rely on settings alone.
- Step 2Run each handoff through the scrubber — Drop the SVG onto the Metadata Scrubber, or paste the markup. It removes
<metadata>/<title>/<desc>and the root editor namespaces/attributes. There are no options, so every teammate gets the same result. - Step 3Confirm the namespaces are gone — Expand View SVG source in the result panel and verify
xmlns:inkscape,xmlns:sodipodi,xmlns:dc,xmlns:rdfare gone and the root no longer carriesversion/id/xml:space. The artwork preview should be unchanged. - Step 4Finish with the minifier — Because the scrubber leaves the
<!-- Generator -->comment and<?xml?>prolog, run the output through the SVG Pro Minifier. That drops comments, the prolog, inter-tag whitespace, and empty attributes — the rest of the production cleanup. - Step 5Optionally tune precision and purge defs — For icon sets, the SVG Precision Tuner rounds bloated coordinates and the SVG Unused Defs Purger removes orphaned gradients/clipPaths left by the editor. Both are optional size wins, not metadata removal.
- Step 6Commit the clean baseline — Paste the cleaned markup into your component (or save
name-scrubbed.svg), commit it, and — if you want it enforced — add a CI check that rejects SVGs still carrying editor namespaces. Convert to a component with SVG-to-JSX if you ship React icons.
Per-tool export cruft and how it is cleaned
What each design tool writes, and which step removes it. 'Scrubber' = the Metadata Scrubber; 'Minifier' = the SVG Pro Minifier.
| Source tool | Typical cruft | Removed by |
|---|---|---|
| Illustrator | <?xml?>, <!-- Generator -->, version="1.1", id, xml:space | version/id/xml:space → Scrubber; comment + prolog → Minifier |
| Figma | <title>layer/path</title>, occasional <desc> | Scrubber (all <title>/<desc>) |
| Inkscape | 6 namespaces, <metadata> RDF, sodipodi:/inkscape: attrs | Scrubber (root); nested attrs → Minifier/manual |
| Sketch | <title>/<desc>, sometimes a generator comment | title/desc → Scrubber; comment → Minifier |
| All of the above | Inter-tag whitespace, empty attributes | Minifier |
Production cleanup pipeline
The recommended order for a handoff SVG, with what each step is responsible for. All run in-browser; nothing is uploaded.
| Step | Tool | Responsibility |
|---|---|---|
| 1 | Metadata Scrubber | Remove <metadata>/<title>/<desc>, editor namespaces, version/id |
| 2 | SVG Pro Minifier | Remove comments, <?xml?>, whitespace, empty attrs |
| 3 (optional) | SVG Precision Tuner | Round coordinate precision to cut path-data bytes |
| 4 (optional) | SVG Unused Defs Purger | Drop orphaned gradients/clipPaths/symbols |
| 5 (optional) | SVG-to-JSX | Convert the clean SVG to a typed React component |
Cookbook
Real handoff SVGs, cleaned. Each shows what the scrubber alone produces — and where the minifier is still needed for a fully production-ready file.
Illustrator icon → scrubbed → minified
The two-step that front-end teams actually need: the scrubber strips the structural metadata, the minifier removes the comment and prolog the scrubber leaves.
Handoff (Illustrator):
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 28.0 -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" xml:space="preserve">
<path d="M5 12h14"/>
</svg>
After scrubber:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 28.0 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12h14"/></svg>
After minifier (production-ready):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12h14"/></svg>Figma title path removed
Figma's <title> exposes your internal naming. The scrubber removes it; the rest of the file is already clean.
Handoff (Figma):
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<title>icons / nav / chevron-down</title>
<path d="M6 9l6 6 6-6" stroke="#0F172A"/>
</svg>
After scrubber:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9l6 6 6-6" stroke="#0F172A"/></svg>Inkscape namespaces that break SVGO
Editor namespaces can cause SVGO plugins and JSX converters to choke or emit invalid props. Removing them at the scrub step prevents downstream errors.
Handoff (Inkscape, abridged):
<svg xmlns:inkscape="..." xmlns:sodipodi="..." xmlns:rdf="..."
sodipodi:docname="icon.svg" inkscape:version="1.3" version="1.1">
<metadata>…</metadata>
<g inkscape:label="Layer 1"><path d="M2 2h20v20H2z"/></g>
</svg>
After scrubber (root namespaces + metadata gone):
<svg xmlns="http://www.w3.org/2000/svg">
<g inkscape:label="Layer 1"><path d="M2 2h20v20H2z"/></g>
</svg>
Note: the nested inkscape:label remains — clear it with the minifier.Clean SVG → React component
Once the SVG is scrubbed and minified, convert it to a typed component for your icon library.
1. /svg-tools/svg-metadata-scrubber → strip metadata
2. /svg-tools/svg-pro-minifier → drop comment + prolog
3. /svg-tools/svg-to-jsx → ChevronDownIcon.tsx
// resulting component (typescript on by default):
export function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {
return (<svg viewBox="0 0 24 24" {...props}><path d="M6 9l6 6 6-6"/></svg>);
}A team CI gate for handoffs
Reject any committed SVG that still carries editor namespaces, so a bad export never reaches the bundle.
# fails the build if any icon still has editor cruft
grep -rlE 'xmlns:(inkscape|sodipodi|dc|rdf)|<metadata|version="1.1"' \
src/icons/*.svg && { echo 'Un-scrubbed SVG committed'; exit 1; } || trueEdge cases and what actually happens
Scrubbed file still triggers SVGO/JSX warnings
Check nested attrsThe scrubber removes editor namespaces from the root but not editor attributes on nested elements (inkscape:label on a <g>). Those orphaned prefixes can still warn in SVGO or JSX converters. Run the SVG Pro Minifier after scrubbing, which strips redundant namespaces and helps clean these up.
Generator comment still names Adobe after scrubbing
By designThe scrubber does not touch XML comments. Illustrator's generator line survives a scrub-only pass. This is expected — chain the minifier to remove it. Plan the two-step into your handoff process rather than assuming the scrubber does everything.
Icon lost its accessible name
Trade-offRemoving <title> drops the accessible name a meaningful icon relied on. In components, re-supply it via aria-label or a <title> you control in the component template, or set aria-hidden for decorative icons. The SVG-to-JSX output makes adding props straightforward.
Designer re-exports with different settings
Re-scrubA new export from updated Illustrator/Figma settings can reintroduce metadata. Treat scrubbing as part of every handoff, not a one-time fix, and back it with a CI gate so a drifted export setting is caught automatically.
Embedded raster in a 'flat' export
Not vector-cleanedIf a designer flattens artwork to an embedded <image>, the SVG is just a wrapper around a raster. The scrubber removes SVG metadata but cannot clean inside the raster or vectorise it. Ask for a true vector export.
Pasted snippet rejected as invalid
invalidPasting a fragment that is not well-formed SVG (e.g. just a <path> with no <svg> wrapper) is rejected before processing. Wrap fragments in a valid <svg> element, or upload the full file instead.
Multi-file handoff folder
Loop requiredThe in-tab tool handles one file at a time. For a whole handoff folder, either run each through the UI, or automate via a paired runner as described in batch SVG metadata removal. There is no in-tab multi-file mode for this tool.
viewBox missing from the export
Preserved as-isIf an export lacks a viewBox (some Illustrator settings omit it in favour of width/height), the scrubber will not add one — it only removes metadata. A missing viewBox is a scaling problem to fix with the SVG ViewBox Fixer, not the scrubber.
Saved percentage near zero on an already-optimised export
ExpectedIf a designer already ran SVGO, the scrubber may find little to remove. That is fine — its job is to guarantee the editor metadata is gone, not to compress. Use the precision tuner or minifier for further size cuts.
Frequently asked questions
What is the fastest way to clean a Figma or Illustrator handoff?
Run it through the Metadata Scrubber (removes <metadata>/<title>/<desc> and editor namespaces) and then the SVG Pro Minifier (removes the generator comment, the <?xml?> prolog, and whitespace). Two clicks per file, both in-browser, and the artwork is unchanged.
Does the scrubber remove the Illustrator generator comment?
No. It does not touch XML comments — only elements and attributes. The <!-- Generator: Adobe Illustrator … --> line survives a scrub-only pass. The SVG Pro Minifier removes it, so chain the two for production.
Will cleaning change how the icon renders?
No. The scrubber leaves all rendering attributes (viewBox, width, height, fill, class, style) and path data untouched, so the icon is pixel-identical. Only non-rendering metadata and editor bookkeeping are removed.
Why do editor namespaces matter to a front-end developer?
Stray inkscape:/sodipodi:/dc: namespaces can make SVGO plugins behave unexpectedly and cause SVG-to-JSX converters to emit invalid or warning-laden props. Removing them at the scrub step gives downstream tooling clean input. Convert afterwards with SVG-to-JSX.
What about editor attributes on nested layers?
The scrubber removes editor attributes from the root <svg> only, not from nested elements like a <g inkscape:label="Layer 1">. Run the minifier afterwards (it strips redundant namespaces) or remove stragglers manually if your linter flags them.
Should I fix the export settings instead of scrubbing?
Do both. Tighter Illustrator/Figma export settings reduce the cruft, but no setting guarantees a fingerprint-free file, and settings drift between designers. Keep scrubbing as the enforced normalisation step regardless of export config.
Can I process a whole handoff folder at once?
The in-tab tool does one file at a time. For a folder, automate via a paired runner — see batch SVG metadata removal for the exact pipeline. There is no in-browser multi-file mode for the scrubber.
What if the icon needs to be accessible?
Re-add the accessible name after scrubbing. In a component, pass aria-label or include a controlled <title> in your template; for decorative icons set aria-hidden="true". The scrubber removes all <title>/<desc>, so accessibility text must be managed at the usage site.
How small will the cleaned icon be?
The scrubber's saving depends on how much metadata the export carried — often modest. The bigger wins come from chaining the SVG Pro Minifier and SVG Precision Tuner. Together they routinely cut a heavy Illustrator export by a third or more.
Is anything uploaded during handoff cleanup?
No. Every step runs in the browser DOM; the SVG never reaches a JAD server (the result panel shows a 0 bytes uploaded badge). Safe for confidential pre-release artwork.
Can I enforce clean SVGs across the team?
Yes. Add a CI check that greps committed SVGs for xmlns:inkscape, xmlns:sodipodi, <metadata, and version="1.1", and fail the build on a match. That guarantees every icon was scrubbed before it shipped.
What tools complete the production icon workflow?
Scrub → minify → optionally tune precision and purge unused defs → convert to JSX for a typed component. Each step is in-browser and composable.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.