SVG Cleaner

Paste raw SVG code and get a cleaned, optimised version ready for the design system. Strips namespaces, normalises fills, sets responsive sizing, and minifies output.

What It Does (Always)

• Strips xmlns and xmlns:xlink from the root <svg> element

Modes

The cleaner has three mutually exclusive modes. Each locks the relevant options automatically.

Logo

Wraps the SVG in a <div class="svg-logo"> container with an aspect-ratio derived from the original dimensions. The logo name is added as a data-logo attribute on the <svg> element for semantic identification — matching how icons use data-icon.

Locks on: Size 100%, currentColor, Strip Comments

<div class="svg-logo" style="aspect-ratio: 200 / 50">
  <svg data-logo="brand" viewBox="0 0 200 50" width="100%" height="100%">
    <path d="M10 10h80v30H10z" fill="currentColor"/>
  </svg>
</div>

Icon

Wraps the SVG in a <div class="svg-icn"> container. The icon name is added as a data-icon attribute on the <svg> element. See the Iconography docs for full icon guidelines.

Locks on: Size 100%, currentColor, Strip Comments

<div class="svg-icn">
  <svg data-icon="arrow-right" viewBox="0 0 24 24" width="100%" height="100%">
    <path d="M5 12h14M12 5l7 7-7 7" fill="currentColor"/>
  </svg>
</div>

Image File

Exports the SVG as a downloadable .svg file with xmlns and XML declaration re-added. Use this when the SVG will be loaded via <img> tags or CSS background-image.

Locks off: Icon, Logo, currentColor, Size 100%

Optional Flags

Browser UI

Open the SVG Cleaner tool in your browser to use the visual paste-and-copy workflow:

1. Paste your raw SVG code into the input area
2. Select a mode (Logo, Icon, or Image file) or configure options manually
3. Click Clean SVG (or Save Image in Image file mode) to process
4. Copy the cleaned output or download the file

CLI Usage

The tool also works from the command line via assets/js/svg-clean.js:

# Icon
node assets/js/svg-clean.js --icon --icon-name arrow-right --current-color --strip-comments <<'SVGEOF'
<svg>...pasted code...</svg>
SVGEOF

# Logo
node assets/js/svg-clean.js --logo --logo-name brand --current-color --strip-comments <<'SVGEOF'
<svg>...pasted code...</svg>
SVGEOF

# Image file
node assets/js/svg-clean.js --standalone --strip-comments -o assets/images/logos/bydefault/logo_bydefault-primary.svg <<'SVGEOF'
<svg>...pasted code...</svg>
SVGEOF

Use heredoc syntax (<<'SVGEOF') to avoid shell escaping issues with quotes in SVG attributes.

File Locations