SVG Clean
What SVG Clean actually does
An SVG exported from a design tool is rarely ready to inline. It carries provenance metadata nobody needs, it may carry active content, its ids are generic enough to collide with the next file pasted into the same page, and it often has fixed pixel dimensions and no viewBox so it refuses to scale. Those are four separate chores usually done by four separate tools or by hand. This does all four in one pass and shows the drawing before and after, because the risk of a combined clean is that one of the four steps quietly changes how the file looks.
How to use it
- Choose one or more SVG files.
- Set the id prefix, or turn id prefixing off if the file is used alone.
- Leave responsive sizing on to get a viewBox and fluid width, or turn it off to keep the original dimensions.
- Check the before and after drawings, read what changed, and download.
Useful for
- Preparing an icon set for inlining into one page without id collisions between icons.
- Getting a designer's export ready to commit to a repository.
- Making a fixed-size logo scale inside a responsive header.
Limits worth knowing
- Id prefixing rewrites references it can see in attributes and style text; a reference built at runtime in JavaScript is not rewritten.
- Responsive sizing needs numeric width and height to derive a viewBox; if they are percentages or missing, it says so and leaves the file alone.
- This does not reduce path precision or merge shapes. Minify is the tool for file size.
Questions people ask
What is id prefixing for?
Two inlined SVGs that both define a gradient called a will collide, and the second one wins for both. Prefixing makes the ids unique per file and rewrites the references to match.
Does this sanitize as well?
Yes, it runs the same safety pass as the sanitize tool, including the animation-target check.
Why did my file get bigger?
Prefixed ids are longer and responsive sizing adds attributes. Run minify afterwards if size matters more than either.