How to use the SVG Optimizer
- Paste SVG markup or open an
.svgfile. - Keep the defaults for the best savings, or lower the precision for even smaller paths.
- Compare the original and optimized previews to make sure nothing shifted.
- Copy the optimized markup or download the
.svg.
Why optimize SVG files?
SVGs exported from design tools carry a lot of baggage: editor metadata, comments, hidden layers, default attribute values, empty groups and coordinates with six decimal places. None of it affects how the image looks, but it can make the file two to five times larger than necessary. Inlined SVG icons repeat that bloat in every page.
What SVGO does
SVGO is the standard SVG optimizer used by most build tools. It runs a set of safe plugins:
- Removes the XML declaration, comments,
<metadata>, editor namespaces (Illustrator, Inkscape, Sketch) and hidden elements. - Collapses useless groups, merges paths where possible and converts shapes to shorter path data.
- Rounds numbers to the chosen precision and rewrites path commands in their shortest form.
- Minifies inline styles and colors (
#FFFFFF→#fff) and removes default values. - Shortens IDs and removes ones that nothing references.
This tool always keeps the viewBox, which is needed for SVGs to scale correctly.
Choosing the precision
| Precision | Best for |
|---|---|
| 1 | Simple icons drawn on a pixel grid |
| 2–3 | Most icons, logos and illustrations (default 3) |
| 4–5 | Detailed illustrations, maps and charts with fine curves |
Lower precision means fewer digits and smaller files, but curves can shift slightly — that is what the preview is for.
Width, height and viewBox
Removing width and height lets the SVG scale to its container with CSS, which is usually what you want for icons and inline SVG. Keep them when the SVG is used in an <img> without explicit dimensions.
Next steps: turn the optimized SVG into a CSS background, a React component or a Webflow element.
Tools that pair well with the SVG Optimizer
- Image Compressor — Shrink photos and graphics by 50–90% without visible quality loss.
- Gzip Compress & Decompress — Compress text or any file with gzip, zlib or raw deflate — or paste Base64 / open a .gz file to decompress it.
- Brotli Compress & Decompress — Compress text or files with Brotli at any quality from 0 to 11, decompress .br data, and compare the result against gzip — all locally in your browser.
- Website Compression Test — Enter a URL to see which compression your server sends for each Accept-Encoding, how many bytes it saves, whether its CSS and JavaScript are compressed, and what Brotli could save.