Optimize SVG Markup
Clean common non-rendering overhead from SVG markup before placing an icon, logo, illustration, or exported vector into a website. The optimizer removes comments and metadata blocks, collapses whitespace between elements, and shows the actual character change beside a copy-ready result. It runs in the browser and deliberately avoids risky path rewrites or accessibility changes, so the output remains understandable and easy to compare with the source.
Use this without the search next time. Prathom Workbench puts Prathom's tools in your toolbar.
Add to Chrome — freeWhat it does
- Remove comments and metadata blocks
- Collapse whitespace between SVG elements
- Show input and output character counts
- Preserve paths, labels, viewBox, and attributes
- Run locally with no file upload
How to use SVG Optimizer
- 1
Paste SVG markup
Copy the XML from an exported icon, logo, or illustration into the editor. A root svg element is required for the optimizer to proceed.
- 2
Review the change
Check the character counts and compare the output with the source. A smaller result is not automatically a better accessible asset.
- 3
Copy the result
Copy the optimized markup into your stylesheet, component, HTML file, or asset pipeline after checking its dimensions and title behavior.
- 4
Test the rendered asset
Open the SVG against light and dark backgrounds and confirm that viewBox, fills, strokes, labels, and intended behavior remain intact.
How it works
The optimizer treats the SVG as markup, not as a raster image. It removes XML comments and metadata elements that do not contribute to browser painting, collapses whitespace between tags, and trims the outer string. Attribute values, path data, IDs, labels, viewBox dimensions, fills, and strokes are left alone. That conservative policy makes the output easy to diff against the source and reduces the chance that a “minifier” changes the artwork.
The tool reports character counts rather than promising a percentage. An SVG with little authoring metadata may barely change, while an editor export can contain enough descriptions and indentation to save a noticeable amount. Character count is a useful first signal, but the final compressed transfer size also depends on Brotli or gzip at the web server.
What deeper optimizers do differently
Dedicated SVG build tools can convert path commands, remove unused definitions, merge styles, replace colors with shorter forms, and simplify shapes. Those operations are powerful but can affect strokes, animation, IDs referenced by CSS, filters, gradients, and accessibility. Run them in a versioned asset pipeline where visual regression checks are possible rather than applying opaque transformations to a one-off logo.
After copying the result, test it at the intended size and on its intended backgrounds. Keep the editable source separately, preserve a meaningful title and description when the image conveys information, and remember that minification does not sanitize an SVG that contains active content.
Path data is where the weight is, and it is left alone
Look at a logo exported from a drawing application and the file is mostly one attribute: a d string of path commands, often several thousand characters of coordinates carried to six decimal places.
Six decimals is meaningless precision. On a mark drawn in a 24-unit viewBox and displayed at 32 pixels, the third decimal place is already smaller than a millionth of a pixel — the numbers describe positions no display can distinguish. Rounding that data to two decimals routinely halves an icon's size, and it is the single largest saving available in most SVGs.
This tool does not do it, and the reason is that the safe rounding depends on the viewBox. A path in a 1000-unit coordinate system needs more precision than the same shape in a 24-unit one, and applying one rule to both either wastes bytes or visibly deforms the artwork. Getting it wrong shows up as corners that no longer meet and curves that flatten, which is exactly the class of damage a "safe minifier" should not be able to cause on a file you paste in once.
So this page removes what is unambiguously not artwork, and leaves the geometry to a build tool that can be configured per asset and checked against a rendered comparison. svgo with an explicit floatPrecision is the normal answer.
Two files can be identical and one still costs more
Character count is a first signal rather than the transfer size, and the gap between them catches people out.
Everything a server sends is compressed with gzip or Brotli, and those work by finding repetition. An SVG with consistent formatting — the same attribute order, the same indentation, predictable spacing — compresses extremely well, because the repeated structure is exactly what the algorithm is looking for. Stripping that structure removes characters and can leave the compressed size almost unchanged.
The practical consequence is that a 30% reduction in characters might be a 5% reduction over the wire, and that is still worth having but is not the number to report to anyone. Measure the compressed size if the number matters: gzip -c file.svg | wc -c takes a second and answers the question the character count only approximates.
The place raw size does matter is an SVG inlined into HTML or a CSS data: URI, where it sits inside a larger document and is parsed on every page load rather than fetched once and cached. For an icon used in twenty places, inlining a bloated export multiplies the cost twenty times over.
Examples
Exported icon with comments
The visible path is unchanged. Only the authoring comment and spacing between tags are removed, so the output is easier to inline and cache.
Illustration with metadata
Metadata can contain export details and large editor descriptions that a browser does not need to render the vector. Keep the source file separately when that provenance matters.
Frequently asked questions
Does this optimizer change the vector paths?
No. This lightweight tool removes comments, metadata elements, and redundant whitespace between tags. It does not round path coordinates, merge shapes, convert strokes, remove IDs, or change fills. Those deeper optimizations can save more bytes but need a full SVG-aware pipeline and should be reviewed against the rendered asset.
Will accessibility labels be removed?
The optimizer does not remove title, desc, aria, role, or other visible SVG attributes. That is deliberate: a tiny file is not an improvement if it loses the label a screen reader needs. Check the output in the context where it will be used, especially when an SVG is an informative image rather than decoration.
Can I paste any XML into it?
The tool requires an svg root element and treats the input as text. It does not fetch external references, execute scripts, resolve CSS, or validate every XML rule. Inline scripts and external resources are security and rendering concerns that should be reviewed before an SVG is embedded in a page.
Is my SVG uploaded?
No. The transformation is a local string operation in your browser. The markup is not posted to an API and no copy is stored by this tool. You can disconnect after loading the page and still optimize private icons, unreleased illustrations, and internal UI assets.
Further reading
- An SVG Straight Out of the Export Dialog Was 38% Metadata and Spare DigitsSVG is text, and an export dialog writes a lot of text nobody asked for: who made the file, when, in what, and every coordinate to six decimal places. None of it draws anything, and on a small logo it is more than a third of the file.
- A PNG Logo Wins Up to 128 Pixels, and the SVG Wins Everywhere AboveA vector file costs the same whatever size it is drawn at, and a raster costs what its grid costs — so there is a size where one overtakes the other. On a logo it arrives sooner than most people assume, and the file-size argument is the least important half of the decision anyway.
- Stripping Camera, Lens and GPS Data Saved Eighteen Bytes"Strip the metadata to make the file smaller" is advice that has been repeated for twenty years, and on the fields people actually worry about it is worth almost nothing. That does not make stripping pointless — it makes the reason for doing it a different one.