SVG ID Prefix
What SVG ID Prefix actually does
Inlining two SVGs into one page merges their id namespaces, and design tools name things predictably enough that collisions are the normal case rather than the unusual one. The failure is confusing because it does not look like a naming problem: one icon renders with another icon's gradient, or a clip path silently applies to the wrong shape. The fix is mechanical but must be complete, because renaming an id without rewriting every reference to it breaks the file more thoroughly than the collision did. This renames and rewrites together, and reports both counts.
How to use it
- Choose the SVG files that will share a page.
- Set a prefix, usually something derived from the file or component name.
- Run it and check that the count of rewritten references looks right for the file.
- Compare the drawings, then download.
Useful for
- Preparing an icon set to be inlined into one document or sprite.
- Fixing an icon that renders with the wrong gradient once a second icon is added to the page.
- Namespacing an SVG before it becomes a component used many times.
Limits worth knowing
- References built at runtime by script are not rewritten, because they do not exist in the file.
- References from an external stylesheet to an id inside the file will break, since the id has changed.
- The prefix is normalised to letters, digits, hyphens and underscores so the result stays a valid id.
Questions people ask
How do I know the rewrite was complete?
The result reports ids prefixed and references rewritten as separate counts, and the before and after drawings are shown side by side, which is where an incomplete rewrite shows up immediately.
Does svg-clean already do this?
Yes, as one of its four passes. This tool is for when prefixing is the only thing wanted.
What prefix should I use?
Anything unique per file. The component or file name is the usual choice.