svgsvgsvg.com

SVG ID Sanitizer

Prefix every id in SVG markup and rewrite every reference to it — prevents ID collisions when you inline several SVGs on the same page. Runs entirely in your browser.

Invalid SVG — check your markup and try again.

Why sanitize SVG IDs before inlining?

Browsers treat every inline <svg> on a page as part of the same document. If two icons each define id="grad", every url(#grad) on the page resolves to whichever element appears first in the DOM — so the second icon's gradient, clip path, mask, or filter can silently break or apply the wrong icon's definition. This is one of the most common bugs when inlining icon sets, sprite sheets, or CMS-driven SVG content.

What gets rewritten

  • id attributes — renamed to prefix + originalId.
  • url(#id) references in any attribute — fill, stroke, clip-path, mask, and filter included.
  • href and xlink:href attributes that point at #id, such as on <use> elements.

Frequently Asked Questions

Why do duplicate SVG IDs cause problems?+

When you inline two SVGs that both define an element with id="grad" on the same page, the browser resolves url(#grad) and href="#grad" references to whichever element comes first in the DOM — so the second icon can silently render with the wrong gradient, clip path, or filter. Prefixing every id with a unique string per icon eliminates the collision entirely.

Does this tool update references to the IDs it changes, or just the id attributes?+

Both. The sanitizer first renames every id attribute, then walks the entire document rewriting url(#oldId) in attributes like fill, stroke, clip-path, mask, and filter, plus href and xlink:href attributes that point at #oldId — so gradients, clip paths, masks, filters, and <use> references all keep working after sanitizing.

What prefix should I use?+

Pick something short and unique per icon — the icon's file name or a short component name works well, e.g. home-icon- or nav1-. As long as each SVG you inline on the same page uses a different prefix, their IDs cannot collide no matter what the original IDs were.

Is my SVG sent to a server?+

No. Parsing, renaming, and reference rewriting all happen in your browser using the built-in DOMParser and XMLSerializer. Your SVG markup never leaves your device.

Related Tools

SVG Optimizer
Remove comments, metadata, and redundant attributes from SVG markup. Minify or format the result — no upload required.
→
SVG Sprite Packer
Combine multiple SVG icons into a single sprite with <symbol> elements and <use> snippets — paste SVGs one at a time, get a ready-to-paste sprite SVG.
→
SVG Validator
Check SVG markup for XML well-formedness errors — unclosed tags, mismatched elements, and malformed attributes — with line and column numbers.
→

How to use

  • Paste your SVG markup and choose a prefix — a short, unique string per icon works best.
  • Every id attribute is renamed, and every url(#…), href, and xlink:href reference is rewritten to match.
  • Copy the sanitized output and inline it alongside other icons — its IDs can no longer collide with theirs.