Follow this worked example, then adapt the same controls to your own image. Open SVG Compressor.
Upload a static SVG or paste the markup
Open SVG Compressor and choose an SVG file or Try a sample. The sample is svg-compressor.svg, a 985-byte orbit mark with a 512 × 512 viewBox, gradient fill, title and description. Use Paste SVG when the markup is already in an editor or clipboard.
The tool accepts up to 20 files at 2 MB each. It parses a complete SVG document and removes standard SVG document declarations without loading external files. Malformed XML, custom entity declarations and internal document subsets are rejected. Very complex files can also reach the element or processing-time limit.
This workflow produces static vector artwork. Scripts, event handlers, external resources, animation and embedded raster images are removed. The Original preview is already sanitized, so it should not be interpreted as an unrestricted rendering of every feature in the source file.
Keep a copy of the original SVG. An interactive illustration or an SVG containing a photograph is a different use case from a static vector icon.
Compare the result and set decimal precision
The two preview panels show the sanitized original and the optimized result. Sizes next to Original and Optimized and the byte summary compare the source file with the finished output. It reports an increase when optimization makes a particular file larger instead of promising a reduction every time.
Open Settings and set Decimal precision to 2 for the example. Precision ranges from 1 to 5 and starts at 3. Lower values can simplify numeric geometry but may shift fine curves, small gaps or aligned edges. Raise it when the preview loses details that matter.
This sample uses straightforward geometry, so precision 2 keeps its recognizable shape. Other SVGs with intricate decimal coordinates may change more. View optimized SVG markup exposes the actual text that will be downloaded; it is not a separate representation of the original.
Check a vector at its intended display size and at a larger view. A subtle shift can be hard to see in a small thumbnail.
The example in this guide
Try a sample: svg-compressor.svg, 985 bytes, 512 × 512 viewBox. Decimal precision 2; keep accessible titles/descriptions and shorten internal IDs enabled; Responsive dimensions and Readable output markup disabled. Downloaded SVG: 635 bytes.
- Source SVG
- 985 bytes
- Optimized SVG
- 635 bytes
- Measured reduction
- 35.5%
- Preserved context
- Title, description and 512 × 512 viewBox
Preserve descriptions and consider external IDs
Leave Keep accessible titles and descriptions enabled for the worked example. This retains the SVG title and description while removing redundant editor metadata and simplifying eligible markup. These are different kinds of information and should not be treated as interchangeable.
Shorten internal IDs is on by default. The optimizer updates references within the SVG, but external CSS or JavaScript may still rely on the original IDs. Turn this option off when the file is part of a larger application that names its elements, and test the finished SVG in that context.
Leave Responsive dimensions and Readable output markup off for the example. Responsive dimensions removes fixed width and height when the coordinate viewBox can provide scalable sizing. Readable output adds indentation and is useful for maintenance, but can increase the text size.
For a standalone icon file, internal ID cleanup is usually straightforward. For an externally scripted diagram, preserving identifiers may matter more than a few saved bytes.
Download and verify the finished vector
Select Start, then Download. The worked output is 635 bytes compared with the 985-byte source: a 35.5% reduction. Its title and description remain, and the displayed comparison is rendered from the genuine source and downloaded SVG.
The article renders both vectors at 1,024 pixels for a sharp illustration of the result; their logical coordinate size remains 512 × 512. A larger preview does not add raster content to the saved SVG. Review the actual vector in your destination page before replacing an existing production asset.
One file downloads as SVG with its original basename. A batch downloads as one ZIP, with numbered suffixes for duplicate filenames. Processing takes place in the browser. Keep the original source if you want to try different optimization settings later.
File-size savings are measured against this sample only. An already optimized SVG may show little improvement or become slightly larger.
Common questions
Will the optimized SVG look exactly the same?
The optimizer aims to preserve static appearance, but rounding and removal of unsupported content can change a file. Compare the previews and test the saved SVG in your project.
What does decimal precision change?
It controls the precision used for numeric geometry and path data. Lower values can reduce size but may shift fine details. The default is 3.
Does it keep the title and description?
Yes, by default. Leave Keep accessible titles and descriptions enabled to preserve those SVG elements.
Why are scripts or raster images missing?
This tool creates a static vector output. Scripts, events, external resources, animation and embedded raster images are intentionally removed during sanitation.
Can I keep IDs referenced by CSS?
Turn off Shorten internal IDs when external code depends on specific IDs. Verify the optimized file in the target page before replacing the original.
Are SVG files uploaded for optimization?
No. The tool performs parsing and optimization in the browser and downloads the result locally.
Can I upload an SVG with a DOCTYPE?
A standard SVG document declaration is accepted and removed without fetching its external identifier. Custom entity declarations and internal document subsets are rejected.
Make the vector lighter, with a result you can inspect.
Try a sample or use your own file, and review the result before sharing.
